שימוש ב-bitmapdata מתקדמים

פורום זה יאגד בתוכו מאמרים ומדריכים בנושאים השונים שיכתבו על ידי חברי הקהילה. המאמרים יקבלו תיוג מילות מפתח, דירוג רמת קושי ודירוג הקהילה. תוכלו למצוא פה מדריך פלאש, ActionScript, MXML, מאמר בנושא תלת מימד, עיצוב, צד שרת וגם Mobile.

שימוש ב-bitmapdata מתקדמים

הודעהעל ידי amihanya ב 01 מאי 2011, 15:04

המחלקה bitmapdata מאפשרת לנו "לזכור" מבנה של displayObject, להעתיק אותו, לשנות אותו ולעשות עליו מניפולציות שונות.
לדוגמא, ניתן לחתוך תמונות, לעוות תמונות, לשנות פיקסלים ספציפיים ועוד.
תיעוד המחלקה נמצא כאן: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/BitmapData.html
בשביל להבין את העבודה על המחלקה נתחיל מדוגמא פשוטה, נניח שעל הבמה יש לנו movieClip שמצוייר בו ציור כל שהוא ושמו mc, בדוגמא הראשונה נשכפל את מראה המוביקליפ:
Syntax: [ Download ] [ Hide ]
Using actionscript3 Syntax Highlighting
import flash.display.BitmapData;
//איתחול המחלקה ביטמפדטא המחלקה מקבלת את הפרמטרים הבאים
//BitmapData(צבע האטימות,האם השכפול יתחשב באטימות,גובה המקור או גובה היעד,רוחב המקור או רוחב היעד);
var bmd:BitmapData = new BitmapData(mc.width,mc.height);
//הוראה לביטמפדטא לצייר את המוביקליפ
bmd.draw(mc);
 
Parsed in 0.030 seconds, using GeSHi 1.0.8.4

כרגע בעצם שמרנו את המוביקליפ כציור בזכרון כמשתנה שנקרא bmd, במידה ונרצה לראות את תוצאת הציור שלנו, נשתמש במחלקה bitmap בדרך הבאה:
Syntax: [ Download ] [ Hide ]
Using actionscript3 Syntax Highlighting
//איתחול המחלקה ביטמפ ויציקת הביטמפדטא לתוכה
var bm:Bitmap = new Bitmap(bmd);
//יצירת ילד אל הבמה
addChild(bm);
Parsed in 0.028 seconds, using GeSHi 1.0.8.4


עד כאן בעצם יצרנו שכפול של המוביקליפ אל הבמה, מכאן מתחיל הכיף, לפני שאנחנו יוצקים את הביטמפדטא אל הביטמפ אנחנו יכולים לבצע עליו מניפולציות, את המניפולציות אפשר לבצע בכמה דרכים, אני אראה כאן דוגמא המבוססת על הדוקומנטציה של פלאש, בשביל לבצע את המניפולציה הזו, נשתמש במחלקה מטריקס(כן כמו הסרט), שמאפשרת לשחק עם הביטמפדטא ולבצע עליו פעולות כמו חיתוך,עיוות,הקטנה והגדלה, ניתן לקרוא כאן את התיעוד המלא: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/geom/Matrix.html
בדוגמא שלי אני אבצע על התמונה שינוי צורה להקטנה פשוטה ע"י מטריקס:
Syntax: [ Download ] [ Hide ]
Using actionscript3 Syntax Highlighting
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.geom.Matrix;

//הגדרת הרוחב והגובה חלקי 2 כיוון שאנחנו מעוניינים לצייר את הביטמפדטא בצורה המוטקנת בחצי
var bmd:BitmapData = new BitmapData(mc.width/2,mc.height/2);
//איתחול מטריקס
var mat:Matrix = new Matrix();
//שימוש בפעולה scale
mat.scale(0.5,0.5);
//הוראה לביטמפדטא לצייר את המוביקליפ
//ולהכיל עליו גם את ההוראות של המטריקס
bmd.draw(mc,mat);

//איתחול המחלקה ביטמפ ויציקת הביטמפדטא לתוכה
var bm:Bitmap = new Bitmap(bmd);
//יצירת ילד אל הבמה
addChild(bm);
 
Parsed in 0.032 seconds, using GeSHi 1.0.8.4


דוגמא נוספת, אני בוחר את כל הפיקסלים האדומים במקור שלי, והופך אותם לשקופים, בשביל לבצע את השינוי הזה, נרוץ בלולאה על הביטמפדטא נבדוק את צבע הפיקסל ואם הוא שווה לצבע אדום(ff0000), נהפוך אותו לשקוף:
Syntax: [ Download ] [ Hide ]
Using actionscript3 Syntax Highlighting
//הגדרנו את האטימות כאמת כיוון שאנחנו רוצים לשקף חלק מהביטמפדטא
var bmd:BitmapData = new BitmapData(mc.width,mc.height,true);
bmd.draw(mc);
//מעבר על כל הפיקסלים במפת הסביות שלנו
//i רוחב
//j גובה
for(var i:uint=0;i<bmd.width;i++)
{
       
        for(var j:uint=0;j<bmd.height;j++)
        {
                //בדיקה של צבע הפיקסל הספציפי
                if(bmd.getPixel(i,j)==0xff0000)
                {
                        //השמת צבע "שקוף" על הפיקסל הנוכחי
                        //המספר המועבר הוא בעצם מספר רגיל+שני ספרות בסוף המציינות את רמת השקיפות
                        bmd.setPixel32(i,j,0x00000000);
                }
        }
       
}


//איתחול המחלקה ביטמפ ויציקת הביטמפדטא לתוכה
var bm:Bitmap = new Bitmap(bmd);
//יצירת ילד אל הבמה
addChild(bm);
Parsed in 0.034 seconds, using GeSHi 1.0.8.4


ישנן עוד המון אפשרויות והדוגמאות כאן הן רק ההתחלה, וכמו שנאמר ואידך זיל גמור (ומכאן - השלם את הלימוד בעצמך).
בלוג פלאש http://amihanya.wordpress.com/
מופאש- מופע אש ולהטוטים http://www.mofash.com
אגדת להטוטים - המסע של להב http://agada.mofash.com
סמל אישי של המשתמש
amihanya
 
הודעות: 695
הצטרף: 14 מרץ 2010, 13:16
מיקום: פתח תקווה

Re: שימוש ב-bitmapdata מתקדמים

הודעהעל ידי miki ב 01 מאי 2011, 17:47

תודה רבהה! :D
miki
 
הודעות: 468
הצטרף: 13 מרץ 2010, 22:59

Re: שימוש ב-bitmapdata מתקדמים

הודעהעל ידי רונן צמיר ב 03 מאי 2011, 08:34

כל הכבוד על המדריך.

הייתי רק מוסיף שהשלב הבא בנושא הוא ה Pixel Bender. שהוא בעצם תכנולוגיה שנוספה לפלאש במטרה לאפשר מניפולציות מורכבות על BITMAPDATA מבלי לדכא יותא מידי את הביצועים (CPU).
ונתן ליכתוב אותו בכלי יעודי חינמי ובשפה פשוטה ( לא AS )

אפשר לראות דוגמא שהעלתי פעם: http://ronen.tsamir.net/?page_id=488.

מקום טוב להתחיל ללמוד את הנושא הוא : http://www.adobe.com/devnet/pixelbender.html

בהצלחה
רונן צמיר
 
הודעות: 404
הצטרף: 13 מרץ 2010, 21:57
מיקום: חולון -> הרצליה פיתוח

Re: שימוש ב-bitmapdata מתקדמים

הודעהעל ידי amihanya ב 03 מאי 2011, 09:10

הבעיה שלי עם פיקסל בנדר זה שממש קשה לכתוב בשפה שלו, אין שם שוב דבר אינטואיטיבי, ואם משתמשים בפיקסל בנדר (התוכנה), האפשרויות בה לא מאוד מגוונות.
בלוג פלאש http://amihanya.wordpress.com/
מופאש- מופע אש ולהטוטים http://www.mofash.com
אגדת להטוטים - המסע של להב http://agada.mofash.com
סמל אישי של המשתמש
amihanya
 
הודעות: 695
הצטרף: 14 מרץ 2010, 13:16
מיקום: פתח תקווה

Re: שימוש ב-bitmapdata מתקדמים

הודעהעל ידי sasmaster ב 03 מאי 2011, 10:31

amihanya כתב:ה האפשרויות בה לא מאוד מגוונות.

PB נותן אפשרויות במספר מונים יותר ממה שאתה יכול להפיק מ BITMAPDATA . למעשה BTD מאפשר לך מניפולציה מאוד פרימיטיבית של הפיקסלים . כאשר שפת PB היא יותר כמו שפות SHADING בספריות כמו OPENGL או DIRECT3D (לא ממש אותו דבר אבל די באותו כיוון בייחוד עם יציאת גרסת PB3D ) .
כאשר BTD נותן לך רק אפשרות לשחק עם MATRIX2D של התמונה ב PB אתה מקבל ארגז מלא של כל האופרטורים מטריגונומטריה כמו sin , cos , vector ועוד . כל אלה מאפשרים לך לייצר אפקטים מאוד מרשימים . ועוד דבר. PB עובד על THREAD נפרד מפלאש (במידה והמחשב שלך הוא MULTI CORE ) וזה אומר שאתה יכול להוריד עומס חישובים מהתוכנית שלך לטובת PB . מכאן למשל כיום נעשה שימוש PB לא רק עבור עיבוד תמונה אלא עבור משהו שנקרא NUMBER CRUNCHING .וזה אומר שאתה שולח חישובים מתמטיים (לאו דווקא קשורים לעיוד פיקסלים) לPB והוא מחזיר לך את התוצאה .בקיצור ראו את הלינקים שרונן סיפק ותגלו שPB זה כלי חזק ביותר.מה שכן ,אני מסכים שהשפה אינה אינטואיטיבית ודורשת הבנת GRAPHIC PROCESSING + מתמטיקה ברמה סבירה. וכאן דווקא יכולתי לתת המלצה למי שמעוניין לקחת ספר של OPENGL וללמוד על כתיבת שיידרים . העיניין הוא שבדוקומנטציה של PB זה לא קל לתפוס על ההתחלה איך מפתחים. לעומת זאת ספרות של ספריות גראפיות כמו OPENGL מסבירה לעומק את עקרונות ה PIXEL PROCESSING ומשדם יהיה מאוד קל להעתיק את הידע הזה ל PB .
"This looks like a job for superman"

סמל אישי של המשתמש
sasmaster
 
הודעות: 436
הצטרף: 14 מרץ 2010, 13:58
מיקום: Rechovot

Re: שימוש ב-bitmapdata מתקדמים

הודעהעל ידי amihanya ב 03 מאי 2011, 10:48

לא דיברתי על האפשרויות של כתיבה ב-PB אלה על האפשרויות שמובנות שם בתוכנה בתצוגה הגרפית שלה, כמו שכתבתי:
בפיקסל בנדר (התוכנה)

ה-PB באמת מאפשר לעשות דברים מורכבים גרפית בלי להקשות על הזכרון, אבל בתור משהו שלא מבין גדול במתמטיקה, הייתי שמח אם היו יותר אפשריות בתצוגה הגרפית ואז ליצא אותן לקוד, אם אתה מכיר כלי שעושה את זה אני אשמח לשמוע.
בלוג פלאש http://amihanya.wordpress.com/
מופאש- מופע אש ולהטוטים http://www.mofash.com
אגדת להטוטים - המסע של להב http://agada.mofash.com
סמל אישי של המשתמש
amihanya
 
הודעות: 695
הצטרף: 14 מרץ 2010, 13:16
מיקום: פתח תקווה


חזור אל מאמרים ומדריכים לפלאש ומעבר

 


  • שרשורים בנושאים דומים
    תגובות
    צפיות
    הודעה אחרונה

מי מחובר

משתמשים הגולשים בפורום זה: אין משתמשים רשומים ואורח אחד

cron