מדריך לימוד פלאש - FlashDev

גרסה יציבה חדשה של Flex SDK הכוללת תיקוני באגים וטיפול בבעיית אבטחה יצאה היום.

באגים שתוקנו

עדכון אבטחה

לינק להורדת Flex SDK

להסבר כיצד לעדכן SDK לפלאש ול-Flex

כאשר עובדים על פרוייקטים גדולים בפלאש, לעיתים זמן הקומפילציה (Ctrl +Enter) לוקח זמן רב (יכול להיות גם מספר דקות). דרך אפשרית לקצר את הזמן הזה, במקרה שהוא נגרם על ידי כמות מסיבית של קוד, היא להשתמש ב-standard mode לעומת strict mode.

Strict mode זוהי הגדרת קומפילציה שמבצעת בדיקת Type checking בזמן הקומפילציה, כלומר שאם אני מעביר לדוגמא לפונקציה מסויימת פרמטר מסוג Number בעוד הפונקציה דורשת String, הודעת השגיאה תתקבל בזמן הקומפילציה ותעצור את התהליך. לעומת זאת אם משתמשים ב-Standard mode מקבלים את השגיאה רק בזמן הריצה במידה שהפונקציה אכן מתבצעת אם הפרמטרים הלא תקינים.

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

שינוי ה-Mode נקבע ב-File->Publish Settings->Flash->AS3 Settings->Errors:Strict mode.

באג:

התקנת קומפוננטה חיצונית מבוססת MXP כמו component, panel, jsfl command באמצעות Adobe Extension Manager לא מוצגת לאחר מכן בפלאש ולא ניתן להשתמש בה.

הסיבה:

באג ב-Adobe Extension Manager מתקין את הקומפוננטה בספריית השפה ה-default של המחשב ולא בתקיית ההתקנה של השפה של הפלאש.

הפתרון:

1. הרצת ה-Adobe Extension Manager מתוך הפלאש עצמו להתקנה יתקין את בקובץ בספריה הנכונה.

2. ניתן גם להעתיק את הקבצים מספריית ההתקנה שלהם, שבמהרה של עברית תמצא ב-C:\Documents and Settings\[user]\Local Settings\Application Data\Adobe\Flash CS4\he\Configuration\…

בעיה שנתקלתי בה לאחרונה בשימוש ב-chromless player של youtube בטעינת קובץ חדש היא שהקובץ מתנגן ללא Sound. הפתרון הוא להשתמש בקוד הבא טרם הטעינה:

ExternalInterface.call("unMute");
ExternalInterface.call("setVolume", volumeValue);

לפרטים נוספים לגבי chromless player

Adobe שחררה גרסת עדכון ל-Flash CS4 שכוללת מספר רב של תיקוני ביצועים בסביבת העבודה.

רשימת תיקונים

להורדת העדכון

מקבץ חדש של סרטי הדרכה בערוץ tutorials from Adobe על מוצרי CS4, הסרטים מובאים במקור ב-lynda, מקור מצוין ללימוד עצמי באמצעות סרטי וידאו כמעט בכל תחום בעולם האינטרנט והתוכנה.

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

השלב הראשון הוא יצירת session של Facebook. ניתן ליצור מספר סוגים של Session.
WebSession- חיבור על ידי אפליקציית פלאש דרך עמוד אינטרנט
DesktopSession- חיבור ל-Facebook באמצעות אפליקציית AIR
JSSession - שימוש ב-bridge של Javascript לחיבור ל-Facebook.
כאן אני אשתמש ב-DesktopSession להדגמה.

השלב השני הוא חיבור המשתמש לאפליקציית Facebook שנועדה להיות ה-backend של אפליקציית הפלאש, פעולת login של המשתמש ל-Facebook אם אין לו session פתוח כבר, ואישור שימוש באפליקצייה, אם לא אושרה עדיין. אם יש אישור המשתמש מקבל חלון שאומר שהוא מחובר והוא ניתן לסגירה ולעבודה מול האפליקציה בלבד מכאן ולהבא.
יצירת האפליקצייה היא באמצעות אפליקציית developer ב-Facebook, שם ניתן ליצור שפליקציות ושם גם מקבלים שני קודים לשימוש. קוד ל-API וקוד סודי לחיבור של האפליקציה. בשניהם יש צורך על מנת לבצע את החיבור הראשוני של השלב הראשון.

חיבור שני השלבים נראה כך:

fb = new Facebook();
desktopSession = new DesktopSession(API_KEY, SECRET_KEY);

//Start the session with Facebook
fb.startSession(desktopSession);

//login to client session
fb.login(false);

בשלב הזה נפתח חלון ה-html לחיבור לאפליקציה, ומתבצע החיבור. באותו הזמן נזרק Event מסוג FacebookEvent.WAITING_FOR_LOGIN. והנה הבעיה הראשונה: אין אישור login לאחר החיבור. ניתן להבין את זה, מכיוון שהדבר מצריך תקשורת בין עמוד ה-html שנפתח לאפליקציה, וניתן לקיים את זה רק אם קיים bridge בין הפלאש ל-javascript. במקרה כמו שלנו שבו האפליקצייה היא AS3 נטו, אין תקשורת כזו. איך פותרים בעיה זו? באמצעות הפונקציה refreshSession, שבמקרה שיש התחברות, האובייקט Facebook יזרוק את ה-Event הבא: FacebookEvent.CONNECT.
וזה נראה כך (בהמשך לקוד למעלה):

fb.addEventListener(FacebookEvent.WAITING_FOR_LOGIN, onWaitingForLogin);
fb.addEventListener(FacebookEvent.CONNECT, onFacebookConnect);

private function onWaitingForLogin(evt:FacebookEvent):void
{
	connectionIv = setInterval(function():void
	{
		fb.refreshSession();
	}, 1000);
}

private function onFacebookConnect(evt:FacebookEvent):void
{
	clearInterval(connectionIv);
	//do something after connection
}

אחרי שיש חיבור ניתן לבצע כל פעולה שקשורה במשתמש, הדוגמא כאן תהיה קבלת רשימת ה-facebook id של כל החברים שלו. עבור כל אובייקט שליחה של בקשה יש אובייקט שיודע לקבל אותה ואת פורמט המידע שנמצא בתוכו, במקרה שלנו שני האובייקטים הם: GetFriends ו-GetFriendsData.

השלב הראשון הוא שליחת הבקשה, בשביל זה אנחנו משתמשים באובייקט BatchCollection מהספריה של ה-API שמאפשר לשלוח מספר בקשות במקביל, אנחנו נעשה זאת עם בקשה אחת:

private function getFriendsList():void
{
	var batch:BatchCollection = new BatchCollection();
	batch.addItem(new GetFriends());

	var batchRun:BatchRun = fb.post(new BatchRun(batch)) as BatchRun;
	batchRun.addEventListener(FacebookEvent.COMPLETE, handleComplete);

	function handleComplete(evt:FacebookEvent):void
	{
		var results:Array = (evt.data as BatchResult).results;
		var gfd:GetFriendsData = results[0] as GetFriendsData;
	}

}

בשלב הזה אובייקט gfd מכיל אבייקט בשם friends שמכיל רשימת אובייקטים שבכל אחד מהם נמצא משתנה בשם uid שמכיל את ה-id של החבר ב-Facebook. כך רצים על הרשימה:

for (var i:int = 0; i < gfd.friends.length; i++)
{
	trace(gfd.friends.getItemAt(i).uid
}

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

So this post is in English for a global usage, since it relevant to much wider audience.
One of the things not implemented in swf files is the ability to right-click an image and download it to a specific library just as done in HTML pages. this ability is very nice-to-have and there are no technology barrirers (except issue that I will mention later) for most of the standard functionality.

My goal was to create a menu similar to HTML Image right-click menu with the following functionality:

1. View Image - open the image in external window/tab
2. Copy Image - copy image content to clipboard for paste in paint etc.
3. Copy Image Location - copy url to clipboard for paste in browser address bar
4. Save Image As - open browse window to save image locally.

I couldn't manage to do 2. since flash access to clipboard is for string data only, although maybe using Alchemy might solve this issue, so data will be delivered to clipboard by C/C++ code, you are most welcome to try.

View Image mission was accomplished by using Loader.contentLoaderInfo.url as path to the image. Copy Image part was made by setting clipboard data as the same url of the previous part and Save Image as has done using 2 steps:

1. Creating encoded data as PNG/JPG using standard Adobe libraries for encoding
2. Using FP 10 FileReference.save ability to save data from byteArray created by the application on the client Desktop without requiring server side scripting development.

The Implementation class is a Decorator for Loader Class and use in the following manner:

import il.flashdev.common.Downloadable;

var loader:Loader = new Loader();
loader.load(new URLRequest(myImagePath));
addChild(loader);
loader = new Downloadble(loader);

here is the result:

download example

Parameters available for the Downloadable constructor:
loader:Loader - Loader instance
viewImageItem:Boolean - should display View Image in Context menu
copyImageLocationItem:Boolean - should display Copy Image Location in Context menu
saveImageAsItem:Boolean - should display Save Image As in Context menu
imageFormat:String - in case not mentioned in Loader object, what is the image format to be saved
imageName:String - in case not mentioned in Loader object, what is the image name to be saved

defaults are: new Downloadable(loader, true, true, true, "", "");

you can use swc files here, or from inside fla

enjoy

הגרסא שיצאה לא מזמן של IE8 יוצרת בעיה בשימוש ב-ExternalInterface class.

התרחיש שיוצר את הבעיה הוא:

1. טעינת סרט פלאש
2. טעינת סרט אחר לתוכו שמשתמש ב-ExternalInterface.

התוצאה: script error ב-ie8 כולל הצבעה על add_callback בספריות של JScript כבעיה.

פתרון אפשרי: יצירת class מעטפת ל-ExternalInterface שמממש את ה-addCallback על ה-Loader שלו. כמובן שזה יכול ליצור בעיית security וחשיפה של הקוד הנטען לקוד הטוען…

אוקיי, לא לשכוח, IE8 עדיין ב-beta. תהיו אופטימיים, הרי זה מיקרוסופט לא?

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

פונקציה חדשה בשם load לאובייקט FileReference מאפשרת לטעון את המידע לצד ה-client לתוך אובייקט byteArray לשימוש על ידי ה-player. הגודל הרשמי שנתמך על ידי הפלאש הוא 100MB. כאשר הפונקציה מופעלת ב-Flash player חייבת לבוא לפניה פונקציית Browse של FileReference, מה שלא צריך כאשר מדובר באפליקציית AIR.

ישנם מספר סוגי Events שיכולים להתרחש תוך כדי הטעינה:

open- תחילת טעינה
progress- תוך כדי תהליך הטעינה (ניתן להוציא כמה מתוך כמה נטען)
complete- סיום טעינה
ioerror - שגיאה ב-IO תוך כדי טעינה

בנוסף יכולות להיות שתי שגיאות חיצוניות:
IllegalOperationError - פתוח חלון browse במקביל או שיש בעיה בהרשאות תקשורת
Memory- הקובץ גדול מדי או הקצאת הזכרון אינה מספיקה.

ולעסק…

והקוד

מאפיין data של ה-fileReference מכיל byteArray שניתן לשימוש על ידי אובייקט כדוגמת Loader, Sound וכדו'

אחלה פיצ'ר