מדריך לסמלים בפלאש

 פתיחה
סמלים הנם אבני היסוד של פיתוח ויצירת סרטונים בפלאש. לצערנו , הספרות הישראלית דלה מאוד ואפילו הספרים הטובים ביותר אינם מתעמקים בנושא ומשאירים חורי ידע רבים שמשאירים אותנו מאחור בפיתוח בטכנולוגיה הכל-כך אהובה עלינו .
במדריך זה אנו נלמד כמעט כל מה שניתן לדעת על סמלים, נסקור את נושא הסמלים תוך כדי מתן תשובות לשאלות הבאות :

• למה צריך סמלים?
• מהם סוגי הסמלים שפלאש מציעה?
• כיצד יוצרים סמלים?
• מהי וכיצד קובעים את נקודת ראשית הצירים של סמל?
• מה מסתתר מאחורי המושג - קינון סמלים?

זהו אחד המאמרים שהשקעתי בו את מרב הזמן ביחס לשאר המאמרים ב- Flashoo , כי ההנחה שלי היא שאת הבסיס חשוב מאוד לבנות בצורה איתנה. אני מקווה ששעות של כתיבה מצידי יעזרו למפתחי הפלאש הישראלים, עם זאת אינני מתיימר להגיע לרמת העומק של ספרים שנכתבו על ידי אנשי מקצוע, ואני מציע לרכוש ספר טוב בכדי להקנות לעצמכם את היסודות .

למה צריך סמלים?
במהלך העבודה בפלאש ודאי נתקלת במצב בו אתה משכפל אובייקט גרפי כלשהו מספר פעמים. ישנם שני חסרונות בשכפול בצורה כזו – אם תרצה לבצע שינוי מסוים תצטרך לחפש את כל האובייקטים הגרפים ולשנות אותם אחד אחד, בנוסף, גודל הקובץ הסופי ( SWF ) גדל ובכך אינך מנצל את ההבטחה הגלומה בפלאש – גודל קובץ צנוע שלוקח פחות זמן להורדה. פלאש פותרת שתי בעיות אלו ועושה עוד המון בעזרת סמלים.

הרעיון מאחורי סמל הוא ליצור מעין אב-טיפוס אשר ממנו יגזרו כל האובייקטים, או במילים אחרות: יוצרים אובייקט כלשהו, נניח עיגול, ובמקום ליצור בכל פעם את אותו העיגול מחדש, יוצרים העתקים שלו, או בשפת המפתחים מופעים שלו ( Instances ). בכך אנו פותרים את שתי הבעיות שהצגתי בפסקה הקודמת - שינוי של האב-טיפוס ישפיע על כל המופעים שלו, וגודל הקובץ הסופי קטן יותר בשימוש בסמלים, כי פלאש אינה צריכה לשמור את הפרטים על כל אובייקט ואובייקט אלא רק על האב-טיפוס. המופעים הם פשוט שכפולים של מידע שכבר נשמר בפלאש.

היכן נשמרים כל הסמלים הללו אתם שואלים? ובכן, התשובה לכך היא – בספריה ( Library ). לכל סרטון יש ספריה משלו אשר בה נשמרים כל הסמלים אשר נוצרים בסרטון. בכדי לקרוא מדריך זה אין צורך לדעת דבר על הספרייה פרט לכך שזהו המקום בו מאוכסנים כל הסמלים. אם תרצו ללמוד על הספרייה, פרסמתי מדריך לשימוש בספריה, אשר יוצא מנקודת הנחה שאתם יודעים מהו סמל.
שימו לב שבמאמרים שונים אין כותבים – "הסמל נמצא על הבמה" כי אם "מופע הסמל נמצא על הבמה" וזאת מפני שאין סמל הנמצא על הבמה - מקום הסמלים הוא בספרייה – ומופעיהם הם אלו הנמצאים על הבמה.
תוכלו לחשוב על סמלים כעל תוכניות ( Blueprints ) לרכב; התוכניות נמצאות בספרייה, בכדי לנסוע צריך ליצור רכב (מופע) מהתוכנית (סמל).

סוגי סמלים
ישנם שלושה סוגי סמלים:

• קליפ ( Movieclip )
• לחצן ( Button )
• גרפיקה ( Graphic )

חשוב להבין מה ההבדל בין סוגי הסמלים בכדי לדעת באיזה סוג לבחור במצבים השונים בהם תתקלו:

קליפ (Movieclip)
קליפ הוא מן סרטון פלאש קטן, אשר קו הזמן שלו עצמאי לגמרי ואיננו תלוי בקו הזמן של הסמל המכיל אותו, מה שאומר שאם תציב קליפ המורכב משלושים פריימים, בתוך פריים אחד בקו הזמן הראשי, הקליפ ירוץ לו והצופה יחזה באנימציה למרות שלכאורה ישנו רק פריים אחד בקו הזמן הראשי.
תוכל להצמיד סאונד לקליפים שונים, כמו כן תוכל להוסיף קוד בתוכם. ניתן להעניק שמות למופעים של סמל מסוג קליפ ובכך לגשת אליהם דרך קוד ActionScript מכל מקום בסרטון. כנראה שתשתמש בסוג זה של סמל ברוב הפעמים, לכן זוהי ברירת המחדל של פלאש בעת יצירת סמלים חדשים.

גרפיקה (Graphic)
גרפיקה, בדומה לקליפ, מכיל קו-זמן משלו, אבל בניגוד לקליפ, קו הזמן של סמל גרפי אינו עצמאי ותלוי בקו הזמן של הסמל המכיל אותו, לדוגמא, אם ישנו סמל גרפי בעל עשרים פריימים הנמצא בקו הזמן הראשי המכיל חמישה פריימים, יוצגו רק חמשת הפריימים הראשונים של הסמל.
מה אתה חושב שיקרה אם מופע של אותו סמל גרפי בעל עשרים פריימים יוצב בקו זמן בעל שלושים פריימים? התשובה לכך היא שהסמל ירוץ כולו, כשיסתיים הוא יחזור חזרה אל ההתחלה וירוץ את עשרת הפריימים שנותרו לו.
אם תנסו להציב קוד ActionScript בסמל גרפי פלאש לא תדווח על שגיאה אבל גם לא תעשה שום דבר אחר, קוד פשוט לא נועד לסמלים מסוג גרפיקה, אלא לסמלים מסוג קליפ. גם סאונד לא הולך יד ביד עם סמל מסוג גרפיקה.
היתרון היחיד של סמל מסוג גרפיקה על קליפ הוא שיפור מינימלי בגודל הקובץ הסופי, תוכל להשתמש בסמל גרפי לרקעים או גרפיקה סטטית אחרת. בסה"כ ניתן תמיד להמיר את סוג הסמל, משמע, אם יצרת סמל גרפי והשתמשת בו בסרטון תוכל להמיר אותו לסמל מסוג קליפ בכל עת שתחפוץ וכל המופעים של הסמל יעודכנו. בנימה אישית, החיסכון בגודל הקובץ לא מצדיק את השימוש בסמל מסוג גרפיקה על קליפ, אני לא זוכר את הפעם האחרונה שהשתמשתי בגרפיקה.

לחצן (Button)
לחצנים הם פריקים של פלאש, קו הזמן שלהם שונה לגמרי במבנהו מקו הזמן אליו אתם רגילים. בעצם, אין שום סיבה לכנותו קו זמן, כפי שתראו מיד:
כפי שניתן לראות באיור, קו הזמן של לחצן מורכב מארבעה מצבים:

• UP – מראה הלחצן כברירת מחדל.
• OVER – מראה הלחצן כאשר מצביע העכבר מרחף מעליו.
• DOWN – מראה הלחצן כאשר המשתמש לוחץ עליו.
• HIT – מגדיר את השטח אשר יגיב לאירועים כמו לחיצה וריחוף העכבר. כל מה שיוצב ב- HIT אינו נראה למשתמש. אין זו חובה לקבוע את פריים ה- HIT , אם לא תציב דבר בפריים זה פלאש תסיק כי שטח הלחיצה הוא היכן שהצבת גרפיקה כלשהי בפריים UP . לדוגמא, אם בפריים UP ישנו עיגול ואת פריים ה- HIT השארת ריק, פלאש תדאג לכך שלחיצה על העכבר תתבצע בלחיצה על העיגול שציירת.

* אם תציבו סאונד בפריים ה- HIT הוא יופעל כאשר תתבצע לחיצת עכבר על האזור המוגדר ב HIT , ולכן אם תציבו סאונד גם ב DOWN וגם ב HIT שניהם יתנגנו סימולטאנית.
שאלה אחת לי אליך קורא יקר, מה הקשר קו-זמן?

אז הבנו מה זה סמל, אילו סוגי סמלים יש, היכן הם מאוכסנים, מה ההבדל בין סמל לבין מופע ולא הבנו מה קשור השם קו-זמן ללחצן.. השאלה עכשיו היא איך יוצרים סמלים?

יצירת סמלים
תוכל ליצור סמל מכל אובייקט גרפי הנמצא על הבמה (אפילו מסמל אחר, אבל בזה נדון בסוף המאמר בסעיף קינון סמלים). יצירת סמל תתבצע בעזרת בחירת האובייקט הגראפי בבמה ו- Modify > Convert to symbol מהתפריט הראשי או בעזרת לחיצה על F8 . תפריט יצירת סמל יפתח בפניך, בו תתבקש להזין את שם הסמל ואת סוגו, כמתואר באיור.

בכדי ליצור סמל חדש ולא מבסיס של אובייקט גראפי קיים תוכל לבחור בתפריט הראשי באופציה Insert > New Symbol או ללחוץ על צירוף המקשים Ctrl+F8 .
כל סמל שתיצור יאוכסן בספרייה בה תוכל לצפות בעזרת בחירה באופציה Window > Library מהתפריט הראשי או בעזרת לחיצה על צירוף המקשים Ctrl+L .
תוכל לערוך סמל בלחיצה עליו בספרייה, או בלחיצה כפולה על מופע כלשהו של סמל בסרטון. מצב זה נקרא מצב עריכת סמל. תוכל לראות מעל קו הזמן איזה סמל אתה עורך כרגע, כפי שמתואר באיור. לחיצה על Ctrl+E תדאג להחזיר אותך מכל מצב עריכה למצב עריכת קו-הזמן הראשי.

* חשוב להדגיש כי למרות שאתה לוחץ על מופע של סמל, אינך עורך רק את המופע הנוכחי עליו לחצת אלא את האב-טיפוס, את הסמל עצמו, ובכך אתה משנה את כל שאר המופעים של אותו סמל.

קביעת נקודת ראשית הצירים של סמל
אם תשים לב תוכל להבחין כי לכל סמל יש מעין צלב במקום כלשהו בשטחו, בדרך כלל במרכזו או באחת מארבעת פינותיו. נקודה זו קובעת מהי נקודת ראשית הצירים של הסמל ( Registration Point ). בנקודה זו נעזרת פלאש לקביעת מיקום המופע של סמל כאשר אנו משתמשים בכלי היישור או ב- ActionScript . בכדי להבהיר את העניין חישבו על מצב בו יצרתם עיגול והמרתם אותו לסמל גרפי עם נקודת ראשית הצירים במרכז, כאשר תשתמשו ב ActionScript ותציבו x = 100, _y = 150_ , נקודת ראשית הצירים של הסמל תופיע בנקודה 100*150 . אם נקודת ראשית הצירים במרכז, המעגל יהיה סביב הנקודה.

קביעת מיקום נקודת ראשית הצירים של סמל פשוטה מאוד, פשוט עבור למצב עריכת סמל בעזרת לחיצה כפולה על מופע שלו או על שמו בספרייה, זהה את הצלב ומקם את הגרפיקה היכן שתחפוץ ביחס אליה. בעצם אינך מזיז את הצלב עצמו באופן ישיר כי אם את הגרפיקה ביחס לנקודת ראשית הצירים.

* חשוב שתהיה עקבי עם קביעת נקודת ראשית הצירים, אני משתמש כמעט תמיד באמצע הגרפיקה - מניסיוני זוהי הבחירה המתאימה וההגיונית ברוב המקרים.

קינון סמלים
זוכר שאמרתי שניתן להמיר כל דבר על הבמה לסמל ורמזתי שכל דבר כולל גם סמל אחר? ובכן הגיע הזמן להרחיב בנושא. תוכל ליצור סמל שיכיל סמל אחר. נניח שאתה רוצה ליצור לחצן מונפש, הדרך הפשוטה ביותר לעשות זאת היא ליצור סמל מונפש מסוג קליפ ולהציב אותו בסמל מסוג לחצן.
סיבה נוספת ופופולארית לשימוש בקינון סמלים היא העובדה שלא ניתן לבצע יותר מאפקט אחד לכל מופע של סמל. פלאש מאפשרת לבצע אפקטים שונים למופעים של סמלים, כל מופע יכול להשתמש באפקט אחר מבלי להשפיע על שאר המופעים או על הסמל עצמו, הבעיה היא שניתן להשתמש באפקט אחד בלבד עבור כל מופע. נניח שתרצה להשתמש בשני אפקטים שונים, לדוגמא בהירות ושקיפות על אותו מופע, ובכן, התשובה לבעיה נמצאת בקינון סמלים, פשוט צרו מופע של סמל והשתמשו באפקט הבהירות, לאחר מכן בחרו את המופע וקננו אותו בסמל חדש בעזרת בחירת המופע על הבמה ולחיצה על המקש F8 , צרו סמל חדש ועליו תוכלו להשתמש באפקט השני, אפקט השקיפות.

סיכום
אני מקווה שהמדריך עשה קצת סדר לאלו מכם שחדשים בעולם הפלאש, והרחיב את הידע בנושא לותיקים מביניכם.