קיצור זמן עבודה בפלאש

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

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

הנה כמה קיצורי מקשים שימושיים מאוד:

F5 - הוספת פריים

F6 - הוספת key frame

Shift+F5 - מחיקת פריים

Shift+F6 - מחיקת key frame

F8 - הפיכת אובייקט מסומן ל-symbol

Ctrl+F8 - יצירת סימבול חדש (ריק)

Alt+Ctrl+C - העתק פריימים

Alt+Ctrl+V - הדבק פריימים

F9 - פתיחת חלון ה-action

Ctrl+1 - שינוי מצב התצוגה ל-100%

Ctrl+2 - שינוי מצב התצוגה כך שכל הבמה תוצג

Alt+Ctrl+S - פתיחת חלון Scale and Transform

Ctrl+B - "שבירת" אלמנט (Break Apart)

Ctrl+Enter - הרצת הסרטון מתוך הפלאש

F12 - הרצת הסרטון מתוך הדפדן.

כמובן שיש עוד קיצורים שימושיים רבים, אבל אלה לדעתי הכי שימושיים.

לסיום, הקיצור הכי חשוב שיכול לחסוך הרבה זמן ותסכול... Ctrl+S :)

Fade In/Out משודרג

(או: מה לעזאזאל השימוש באופציית blend?)

בחלון ה-properties בפלאש, יש חלק שנרא blend ויש בו אופציות שונות לבחירה.

לומר את האמת - אני לא יודע למה רובן משמשות... זאת אומרת, ברור לי מה התוצאה של בחירה בכל אחת מהאופציות, אבל למה זה שימושי? ל- Adobe הפתרונים...

יש בכל זאת 2 אופציות שיכולות להיות שימושיות מאוד.

אחת היא: layer והשנייה, שעליה אכתוב בהזדמנות, היא: multiply.

השימוש ב layer מתבקש כשיש לנו MovieClip שמופיעים בו כמה אלמנטים אחד על השני (לדוגמא, אם בנינו רקע שמדמה רחוב, ושמנו ברקע הזה שמיים, קיר, ספסל, עצים וכו' - יש לנו בעצם מוביקליפ אחד עם כמה אלמנטים שעשויים להיות חופפים אחד לשני).

ברגע שנעשה Fade In/Out ל-MovieClip הזה, אנחנו נראה - תוך כדי ה-Fade שמדובר על כמה אלמנטים נפרדים ולא על "גוש" אחד של רקע.

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

אם עדיין לא ממש ברור - אין כמו מראה עיניים:

שימו לב ל- MovieClip העליון ושימו לב לתחתון. בעליון ה-Fade נוצר בלי ששינינו שום דבר בחלונית הblend, ובתחתון ה- blend מוגדר עם האופציה של layer.

הבדל בזמן ה-Fade ניכר בבירור.

טיפ - תצוגה של MovieClip

לעתים, יוצא לעבוד עם MovieClip שבפריים הראשון האלמנט/ים באלפא 0 ובהדרגה הופכים לנראים.

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

הפתרון הטוב ביותר שאני מכיר הוא:

1. 
   
   להיכנס לתוך אותו מוביקליפ, ליצור שכבה חדשה ולהוסיף לכל ה-MoviClip פריים אחד (כלומר, לכל השכבות).
   
   
   
2. 
   
   להעתיק אל הפריים הראשון בשכבה החדשה את התוכן של ה-MovieClip במצב שבו האלמנטים נראים.
   
   
   
3. 
   
   בפריים השני באותה שכבה להוסיף פריים ריק.
   
   
   
4. 
   
   אם לא קיימת שכבה לקוד, להוסיף אחת כזו, ובפריים הראשון פשוט לכתוב:
   
   
   

gotoAndPlay(2);

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

האם באנר גדול יותר מביא אחוזי הקלקה גבוהים יותר?

לא בהכרח מה שחשבתם...

הנה התשובה

את המחקר, אגב, ערכה Eyeblaster הישראלית

באגים ופתרונות - ריבוע עם פינות מעוגלות

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

לא משהו...

מה אפשר לעשות כדי לפתור את הבעיה?

פשוט מאוד. בתפריט Modify---> Shape ישנה אפשרות שנקראת Convert Lines To Fills.

מסמנים את המסגרת הסוררת, ובוחרים באפשרות הזאת.

עכשיו הריבוע נראה ככה:

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

רעיונות נוספים יתקבלו בשמחה :)

אופטימיזציה למשקל הקובץ (חלק 2)

אחרי שעברנו בפוסט הקודם על כמה עניינים בסיסיים, הנה עוד כמה נקודות שיעזרו לשמור על משקל סביר לקובץ ה-swf:

•  פונטים. כל פונט שנעשה בו שימוש ב-fla, מעלה את משקל הקובץ. לדוגמא - אם נכתוב את הטקסט "פלאש ומסביב" בפונט אחד הקובץ ישקול פחות מאשר אם נכתוב "פלאש" בפונט אחד ו"ומסביב" בפונט נוסף. נשמע אולי טריוויאלי, אבל לא תמיד מקדישים תשומת לב לעניין מספר הפונטים שנעשה בהם שימוש. (כמובן שמשקל הקובץ הוא לא הכל, והרבה פעמים נחליט בכל זאת להוסיף עוד פונטים...).
  
• אופטימיזציה של shapes. לפעמים על הבמה מופיעות צורות מורכבות יחסית. בפלאש יש אפשרות לאופטימזציה של צורות כאלה, בלחיצת כפתור. האפשרות הזאת מופיעה בתפריט - Modify  --> Shape ---> Optimize.
  בדוגמא הבאה שתי הצורות נראות כמעט זהות. על אחת מהן, הימנית, הופעלה פעולת ה-Optimize.
  המשקל שהיא תופסת הוא פחות משליש ממשקל הצורה השמאלית.
  
  

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

 הערות, הארות ותוספות יתקבלו בשמחה :)

אופטימיזציה למשקל הקובץ (חלק 1)

אחד הדברים שפעמים רבות לא מקפידים עליהם, הוא משקל ה-swf.

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

ובאופן כללי, צורת עבודה לא נכונה.

אז איך בונים את קובץ ה-fla בצורה נכונה מבחינת משקל?

יש כמה וכמה דברים שאליהם צריך לשים לב. נתחיל עם כמה:

• תמונות. עניין התמונות הוא אולי העניין הבסיסי ביותר בכל הנוגע למשקל הקובץ.
  שלושה דברים שחשוב להקפיד עליהם:
  
  1. לייבא לפלאש את התמונה כשהיא כבר בגודל שבו היא אמורה להיות מוצגת. כלומר, אם יש לנו תמונה בגודל של 200x200, ואנחנו רוצים להציג אותה בגודל של 100x100, לא נייבא אותה לפלאש בגודל 200x200 ושם נקטין בחצי, אלא נשמור אותה מראש בגודל של 100x100.
  
  2.  כהמשך לסעיף הקודם, גם אם ייבאנו את התמונה בגודל הנכון, אבל חלק ממנה לא מופיע על הבמה,
  המשקל הסופי עדיין יכלול את כל התמונה (גם את החלק שלא מוצג). לכן, כדאי לחתוך את התמונה כך שהיא תכלול רק את המינימום שאנו צריכים שיופיע על הבמה.
  בהקשר הזה כדאי לציין, שכל מה שמופיע איפשהו על הטיימליין, בין אם רואים אותו בסוף ובין אם לא רואים אותו בסוף - ישפיע על משקל הקובץ (אלא אם כן הוא נמצא בשכבת Guide).
  
  3. ברירת המחדל של הפלאש היא להציג את התמונה במצב של Use imported JPEG data
  כשהאפשרות הזו מסומנת, איכות התמונה תהיה מירבית, אבל גם המשקל יהיה די מירבי...
  לכן, כדאי להסיר את הסימון, ובתיבה שתיפתח, ניתן לקבוע את איכות התמונה מ-0 עד 100.
  בדרך כלל, הורדה של האיכות ל- 60-70, תוריד את משקל הקובץ משמעותית ומצד שני לא תפגום באיכות בצורה הנראית לעין.
  
  מה שכתוב בסעיף הזה נכון ברוב המקרים. יש הבדלים בין JPEG לבין PNG/ GIF, יש מקרים יוצאי דופן אחרים, אבל על כל אלה אכתוב בהזדמנות קרובה.
  
• שימוש ב-Symbols, גם הוא דרך עבודה נכונה שבסופו של דבר גם תורמת להורדת משקל הקובץ.
  בעניין הזה יש העדפות שונות בין משתמשי הפלאש השונים. יש כאלה שלמען הנוחות והסדר מעדיפים להפוך כל אלמנט (או כמעט כל אלמנט...) לסימבול. על כל פנים, בהקשר של משקל הקובץ, אם אותו אלמנט מופיע יותר מפעם אחת, כדאי להפוך אותו לסימבול.
  בעניין הזה כדאי להיות קצת יצירתיים :) כלומר, סימבול של ריבוע, יכול לשמש גם כרקע מלבני, גם כמסיכה ריבועית לטקסט, וגם כקו עבה. אפשר להגדיל, להקטין, למתוח או למעוך כדי לקבל צורות שונות לשימושים שונים, אבל הסימבול הוא אותו סימבול...
  
• עניין בסיסי נוסף שמשפיע על משקל הקובץ הוא Shape tween מול Motion tween.
  shape tween הוא אופציה נחמדה, אבל בכל הקשור למשקל הקובץ, כדאי להשתמש בו כמה שפחות.
  נניח שיש לכם עיגול שמגיע באנימציה מצד אחד של הבמה לצד השני. יש לכם שתי אפשרויות: או ליצור עיגול וב-shape tween להעביר אותו לצד השני. או ליצור עיגול, להפוך אותו לסימבול ולעשות לו motion tween. בשני המקרים, התוצאה הנראית לעין תהיה זהה, אבל משקל הקובץ יהיה נמוך יותר באופציה השניה.

עד כאן להפעם.
יש עוד כמה דברים חשובים בהקשר של משקל ה- swf, אבל נשאיר אותם לפעם הבאה.

הערות והארות יתקבלו בברכה :)