תפריט ראשי

תוצאות 1 עד 19 מ 19
  1. #1
    הצטרף בתאריך
    29.01.2007
    הודעות
    3,122

    F L A S H
    //----------
    //הקדמה
    //----------
    "לפלאש נגן ותוכנה המשמשים להצגה ויצירה של סירטוני פלאש. שימושיה רבים, וכיום העיקרים שבהם הם יצירת אנימציות, יישומי אינטרנט, משחקים ואפליקציות ויזואליות אחרות. התוכנה מבוססת על גרפיקת וקטורים התורמת להקטנת משקל הקובץ, אך תומכת גם בשימוש במפת סיביות. ניתן לצרף לסרטוני הפלאש קובצי וידאו וקול, ולהשתמש במצלמת אינטרנט ומיקרופון. במידה והם מחוברים למחשב. פיתוח אפליקציות בפלאש נעשה תוך שימוש בשפת ActionScript, שיצאה זו מכבר בגירסתה השלישית. כיום השימוש בפלאש נפוץ ביותר וניתן לראותו בסדרות טלוויזיה מצוירות, משחקים ואתרים רבים. מרבית הדפדפנים מגיעים עם נגן פלאש מובנה בתוכם." -ויקיפדיה

    מה זה אומר "תאכלס"? בעזרת פלאש ניתן ליצור כמעט כל דבר ובקלות.

    כמה דוגמאות לגבי הישגים בפלאש (לסדר אין חשיבות):
    -עם יציאת פלאש, דיסני החלה להשתמש בו ליצירת סרטונים מצוירים.
    -כל אחד מהסרטונים של להקת The Gorillas נעשו בתוכנת הפלאש.
    -מתכנת משחקי פלאש יכול להגיע לרווח חודשי של 3,500 דולר+ בחודש.
    -כמעט כל האתרים שנפתחים עבור משחקי וידאו משתמשים בפלאש לבניית האתר.
    -אחת הדרישות העיקריות בקורות חיים של מעצבים גרפיים היא ידע כלשהו בתוכנת הפלאש.
    -לפני מספר שנים נכתבה מערכת הפעלה למחשב שהשתמשה אך ורק בפלאש. אם כי נכשלה.


    //----------------------
    //הכרות עם הממשק
    //----------------------
    קחו כמה דקות להכיר את התוכנה. ציירו משהו, כתבו משהו, למדו את הכלים. שימו לב לציר הזמן.
    היות והשיעורים יהיו בעיקר על כתיבת שורות קוד, אני אציין רק דבר אחד חשוב לגבי ציר הזמן:
    Key Frames, או בעברית, תמונות מפתח. ליצירת תמונת מפתח לחצו עם הכפתור הימני של העכבר בציר הזמן ובחרו ב Create Key Frame או שתלחצו על F6. תמונת מפתח, כשמה היא מפתח. היא תמונה (לא במובן הגרפי) בה משהו משתנה. אם זה בקוד, משמע שהקוד הקודם יפסיק לעבוד ועכשיו יחל קוד אחר. אם זה באנימציה, משמע שהתמונה תשתנה. ליצירת Frames לחצו F5, או בחרו באפשרות ממסך הבחירה בעת לחיצה עם הכפתור הימני של העכבר על ציר הזמן.


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

    כך או כך, כמו בכל מקום אחר בין אם זה עבודה בפלאש, פוטושופ או עבודה במשרד - סביבת העבודה היא דבר חשוב מאוד. סביבת עבודה טובה תורמת ליצירתיות ולהצלחה כברירת מחדל.
    הדבר הראשון שכדאי לעשות לפני שקופצים להשתמש בתוכנה זה לסדר את מה שמחוץ למסך - נקו את השולחן שלכם משטויות. אחר כך התחילו לסדר את התוכנה. בחרו גודל לבמה (Ctrl+J), בחרו FPS (רצוי 18-35). חישבו מה אתם מתכננים לעשות - ליצור אנימציה, או לכתוב קוד?
    אם אתם מתכננים ליצור אנימציה, סגרו את חלון הפעולות Actions, שם רושמים את הקוד.
    אם אתם מתכננים לכתוב קוד, סגרו את החלונות הגרפיים שאין להם צורך בהם כמו חלון שינוי הצורה Transform והצבע Colors.


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


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

    //-------
    //הקוד
    //-------
    לזה חיכיתם.
    ישנם כמה דגשים בעת כתיבת הקוד:

    //איפה כותבים את הקוד?
    את הקוד ניתן לרשום בשני מקומות, או על אובייקט בבמה הידוע בשם MovieClip, מחסנית (היות והאובייקט יכול לאחסן בתוכו גרפיקות ועוד) או בתמונת מפתח Key Frame.
    ברוב המדריכים הבסיסיים והדילטנטים תראו ששמים את הקוד על הMC (=כך נתייחס ל'מחסנית' מעכשיו).
    איך? לחצו על הMC (אותו ניתן ליצור על ידי ציור משהו על הבמה, סימונו ואז לחיצה על כפתור הF8, או על ידי לחיצה על כפתור Create Symbol בתחתית חלון הספרייה) ופתחו את חלון הפעולות (F9, או לחצו על כפתור Actions התחתית המסך).
    האפשרות השנייה היא זו שאני ממליץ עליה, כתיבה על תמונת המפתח. קודם צריך ליצור תמונת מפתח (התמונה הראשונה היא תמונת מפתח תמיד, אגב). לחצו עליה, ופתחו את חלון הפעולות.
    הסיבה שהאפרות השנייה עדיפה היא כי כך כל הקוד מרוכז במקום אחד והוא יותר מסודר. מלבד זאת, רוב המדריכים שמסקרים פעולות מסובכות יותר בפלאש מתייחסים רק לקוד שנרשם על תמונות מפתח.
    ההבדל בין שתי צורות כתיבת הקוד או קטן מאוד, אבל קיים.
    לדוגמא, כתיבה על MC:
    קוד:
    onClipEvent (enterFrame) {
        _x ++;
    }
    כתיבה בKF (=תמונת מפתח):
    קוד:
    onEnterFrame = function () {
        MC._x ++;
    }
    (בהנחה שהשם שנתנו לאותו MC הוא MC)

    //איך כותבים את הקוד?
    כמובן שבעזרת המקלדת, אבל כדאי להזכיר גם שרק באנגלית
    בקוד יש תנאי ותוצאה כמו שנראה למעלה. ברגע כניסה לתמונה = onEnterFrame אנחנו אומרים שהרגע הזה שווה ערך לפונקציה כלשהי.
    העניין בפלאש שהוא כל הזמן ממתחיל מחדש את הסרטון, כלומר כל פעם הוא נכנס לאותה תמונה (frame) שוב פעם. כמה פעמים בשנייה הוא יכנס שוב לאותה תמונה? תלוי בFPS שקבעתם.
    מסיבה זו, יוצא שהקוד הנ"ל כל הזמן יפעל כי בכל רגע אנחנו נכנסים שוב לתמונה הזו, ועוד הפעם התנאי נענה.
    בסוגריים המעגליים אנחנו רושמים משתנים מיוחדים, או שמות, ועוד דברים אבל נגיע לזה בשלב מאוחר יותר.
    בין הסוגריים המסולסלים אנחנו רושמים את ה"בשר" הקוד שאומר מה לעשות.
    הסבר קצר לגבי הקוד למעלה:
    x_ מתייחס לקוארדינטת הX של פריט מסוים.
    ++ משמעו "הגדל ב1" (כך גם -- משמעו "הקטן ב1")
    כלומר כל פעם שהקוד ירוץ, שזה כל פעם שפלאש יכנס לתמונה (מה שתלוי בFPS שקבעתם), פלאש יגדיל את קוארדינטת הX של הפריט MC ב1. כלומר יזיז את MC פיקסל אחד ימינה.
    ; - חשוב מאוד. אנחנו משתמשים בסימן הזה כדי להראות שכאן נגמרת שורת הקוד, עד כאן זה משפט. רק משפטים "בשריים". כמובן שהקוד יעבוד גם ללא ; אבל כך הקוד נהיה ברור יותר וכן גם מקובל יותר בקהילת הפלאש.
    לפני המרכיב (כמו x_) נכתוב את שם הפריט אליו אנו מתייחסים (כמו MC). את שם הפריט, שנקרא Instance Name נרשום פה (לאחר שהפכנו אותו לMovieClip):


    //איך בודקים את הקוד?
    אם קיימת שגיאה בקוד, בעת בדיקת הסרטון (Ctrl+ENTER) יפתח חלון "output" שיפרט את כל השגיאות הקיימות בקוד. אבל אם אתם רוצים לבדוק את פעולת הקוד, לראות אם התנאי נענה והתוצאה מתקיימת כדי להשתמש בפקודת trace();.
    הפקודה הזו תציג הודעה כלשהי על גבי חלון הoutput במידה והיא נקראת. לדוגמא:
    קוד:
    trace("I love Shnitzel");
    רשמו קוד זה בחלון הפעולות על גבי תמונת המפתח הראשונה. לחצו Ctrl+ENTER לבדיקת הסרטון ותקבלו את ההודעה הנ"ל.
    שימו לב: הציטטות מתייחסות לטקסט, משהו כתוב. אין להשתמש בהם לשום דבר אחר חוץ מהתייחסות לכתיבת טקסט. כמו כן, אין לכתוב אף טקסט אחר ללא ציטטות, אחרת פלאש יתייחס אליו כאל פקודה כלשהי, וכיוון שהוא לא יכיר אותה ייתכן שתיזכו לשגיאה.

    //מערכת הצירים

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

    //טיפים לגבי כתיבת הקוד
    1) השתמשו בשמות משתנים\פרמטרים ברורים. כשנגיע לשיעור על שימוש בהם, ותלמדו כדי לסווג אותם - תמיד תסווגו את המשתנים כשאפשר וכשצריך.
    2) יש אנשים שאוהבים לפתוח ולסגור את הסוגריים המסולסלים {} מיד, ואז להשלים את מה שבפנים. נסו את זה אם קורה לכם שאתם כל הזמן שוכחים לסגור אותם או מאבדים ספירה לגבי כמה כאלה פתחתם. קוד לא סגור לא יעבוד.
    3) השתמשו בפקודת הtrace לבדוק את הקוד שלכם כל הזמן.
    4) ניתן לרשום הערות בתוך הקוד, כלומר שורות מילים שהתוכנה תתעלם מהם אבל אתם תוכלו לקרוא. לכתיבת שורה אחת של הערה השתמשו ב //. לכתיבת בלוק הערה השתמשו ב*/ לפתוח את הבלוק, ו /* לסגור. דוגמא:
    קוד:
    trace("I love Shnitzel"); // This is a trace.
    /*
    The above is a trace.
    It is printing:
    "I love Shnitzel"
    */


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


    עד פה פרק זה.

    אני מקווה שלא פיספסתי אף נושא.
    אם יש שאלות\הערות\הארות נא להשתמש בדיון זה.


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







    ו-הצעות
    מה אתם רוצים ללמוד בשיעור הבא? רשמו פה.
    נערך לאחרונה על ידי Potato; 25.08.2009 בשעה 20:21. סיבה: הגהה

    שתף ב-Google+

  2. #2
    הצטרף בתאריך
    23.10.2006
    עיר
    אחירטחדרט
    הודעות
    6,180
    וואו, מדריך מעולה!
    לנעוץ, ללנקק, להדפיס ולמסגר D:
    אני עוד מעט אנסה להזיז כדור באמצעות המחשבה (או האקשן).

    אמממ...אז שאמרת ילש אפשר לבנות אתר בעזרת אקשן בלבד,
    אמרת שזה לא כזה קשה. זה יוכל להיות השיעור הבא או שזה מתקדם מדי?
    שוב כל הכבוד על ההשקעה
    שתף ב-Google+

  3. #3
    הצטרף בתאריך
    29.01.2007
    הודעות
    3,122
    שיעור הבא לא. זה אמנם לא קשה מדי אבל צריך לכתוב הרבה שורות.
    עדיף להתחיל בשיעורים עם פיסות קוד קטנות.

    שתף ב-Google+

  4. #4
    הצטרף בתאריך
    23.10.2006
    עיר
    אחירטחדרט
    הודעות
    6,180
    אני מציע שתיתן דוגמאות לשיעורים כאלה, אחרת יהיה קשה לדעת מה האפשרויות לפיסות
    קוד קטנות, כי מי שמבקר במדריך הזה...סביר שלא יהיה המבין הכי גדול בפלאש.
    שתף ב-Google+

  5. #5
    הצטרף בתאריך
    29.01.2007
    הודעות
    3,122
    העיקר שיציעו מה רוצים ללמוד.
    אם הרוב רוצים ללמוד לבנות אתר, נתמקד במשיכת מידע ממקורות חיצוניים.
    אם הרוב רוצים ללמוד לבנות משחק, נתמקד באלמנטים של משחקים.
    D:

    לי האמת לא משנה מאיפה להתחיל ומה ללמד.

    שתף ב-Google+

  6. #6
    הצטרף בתאריך
    11.09.2008
    עיר
    רעננה מרכז
    הודעות
    2,743
    ענק,ענק וענק D:
    ואוו פשוט תודה

    פעם הבאה פאזל!
    שתף ב-Google+

  7. #7
    הצטרף בתאריך
    29.01.2007
    הודעות
    3,122
    פאזל רעיון טוב, אבל נתחיל מפאזל מאוד מאוד בסיסי.

    שתף ב-Google+

  8. #8
    הצטרף בתאריך
    11.11.2008
    הודעות
    6,764
    אני מעדיף בניית אתרים קודם כל.
    שתף ב-Google+

  9. #9
    הצטרף בתאריך
    24.04.2008
    עיר
    נווה אילן
    הודעות
    2,433
    יש לי בעיה כל פעם שאני מנסה ליצור עיגול:
    1120: Access of undefined property onEnterFrame.

    עשיתי בדיוק לפי המדריך, בדקתי את הקוד, אולי מישהו יכול לעזור לי?
    Martin Lopez > כל מתופף שהיה קיים אי פעם.
    Sabaton in Israel - 28.8 !!
    שתף ב-Google+

  10. #10
    הצטרף בתאריך
    29.01.2007
    הודעות
    3,122
    בוודאי, אתה יכול לכתוב פה את הקוד שהשתמשת בו?

    שתף ב-Google+

  11. #11
    הצטרף בתאריך
    24.04.2008
    עיר
    נווה אילן
    הודעות
    2,433
    קוד:
    onEnterFrame = function () {
        cycle._x++;
    }
    Martin Lopez > כל מתופף שהיה קיים אי פעם.
    Sabaton in Israel - 28.8 !!
    שתף ב-Google+

  12. #12
    הצטרף בתאריך
    29.01.2007
    הודעות
    3,122
    זכרת לתת לMC שלך Instance Name של "cycle"?
    כשאתה יוצר MC אתה אמנם נותן לו שם, אבל זה השם שנשמר בספרייה ולא השם אליו הקוד מתייחס.
    כדי לתת לו שם שתוכל להתייחס אליו בקוד, אתה צריך לתת לו Instance Name כמו שכתוב בהקדמה. זה יהיה בחלון הProperties.

    שתף ב-Google+

  13. #13
    הצטרף בתאריך
    24.04.2008
    עיר
    נווה אילן
    הודעות
    2,433
    כן, עשיתי את זה. (קראתי את המדריך 3 פעמים עד שהתחלתי לעשות משהו, ואפילו ושיתי קצת סדר בשולחן עבודה.)


    אגב, AS זו שפת OOP? כי אם כן, כנראה שאני יסתדר סבבה (יש לי ניסיון ב-JS וב- PHP)
    נערך לאחרונה על ידי NOT-HERE; 26.08.2009 בשעה 00:45.
    Martin Lopez > כל מתופף שהיה קיים אי פעם.
    Sabaton in Israel - 28.8 !!
    שתף ב-Google+

  14. #14
    הצטרף בתאריך
    29.01.2007
    הודעות
    3,122
    OOP כן.

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

    שתף ב-Google+

  15. #15
    הצטרף בתאריך
    24.04.2008
    עיר
    נווה אילן
    הודעות
    2,433
    נכתב במקור על ידי Potato
    OOP כן.

    אתה משתמש בCS4, נכון?
    אני לא יודע הרבה על הגרסא הזו, אני משתמש באחת יותר מוקדמת, F8.
    אבל קודם תבדוק שהגדרות השפה שאתה משתמש בה הן על ActionScript2 ולא ActionScript3.
    כן, CS4
    וההגדרות היו על AS3 בגלל שבהתחלה של המדריך דיברת על שהשפה הגיעה לגרסא השלישית וחשבתי שאתה מלמד עליה.
    אניווי, יצאתי FAIL
    Martin Lopez > כל מתופף שהיה קיים אי פעם.
    Sabaton in Israel - 28.8 !!
    שתף ב-Google+

  16. #16
    הצטרף בתאריך
    29.01.2007
    הודעות
    3,122
    מצטער שלא הייתי ברור מספיק
    האמת שהיום עדיף ללמוד כבר AS3 ולא AS2.
    הבעיה היא, שוב, אני מוגבל לAS2 ולכן זה כל מה שאני יכול ללמד.

    שתף ב-Google+

  17. #17
    הצטרף בתאריך
    29.01.2007
    הודעות
    3,122
    אז מה, רק לאחד מכם יש שאלות לגבי התרגול ומה שכתבתי?

    שתף ב-Google+

  18. #18
    הצטרף בתאריך
    01.11.2007
    עיר
    אשדוד
    הודעות
    3,047
    כנראה שזה היה מספיק קל P:
    מצטער שרק עכשיו אני "נזכר" לראות את המדריך XD.
    בכל מקרה, לדעתי אנימציה בסיסית תהווה מדריך טוב גם למשחקים וגם לבניית אתרים.
    לדוג' שימוש ב-Motion/Shape Tween, onMouseClick/MouseOver וכו' וכו'.
    בואו לשחק קצת DOTA. אתם יודעים שאתם רוצים...
    אתם מוזמנים לשלוח לי הודעה פרטית מכל סיבה שהיא.
    שתף ב-Google+

  19. #19
    הצטרף בתאריך
    25.12.2008
    עיר
    אשקלון
    הודעות
    3,908
    מדריך מעולה !!
    שתף ב-Google+

הרשמה