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

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

באגים שתוקנו

עדכון אבטחה

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

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

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

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

ישנן שתי דרכים לבצע שינוי של עכבר, הראשונה מתאימה לשינוי אייקון ממש, והשניה לשינוי תפקיד (כמו האפשרות השלישית)

שינוי אייקון

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

var circle:Circle = new Circle();
Mouse.hide();
addChild(circle);

stage.addEventListener(MouseEvent.MOUSE_MOVE, handleMouseMove);

function handleMouseMove(evt:MouseEvent):void
{
circle.x = mouseX;
circle.y = mouseY;
}

שינוי התנהגות

במקרה הזה, שימוש בפקודת Mouse.cursor החדשה של Flash Player 10 תאפשר לפתור את הבעיה בשיטה הקלה ביותר. השימוש בפרמטר זה אפשרי רק מ-Flash Player 10:

Mouse.cursor = MouseCursor.HAND;

עוד על אפשרויות שינוי cursor

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

שלב ראשון: הורדת התקנה מאתר Opensource.adobe.com

באתר של Adobe ניתן להוריד כל גרסה של Flex SDK על בסיס Nightly build. כמובן שעדיף להשתמש בגרסאות יציבות.
מהאתר ניתן להוריד את גרסת ה-production האחרונה (כרגע 3.3.0.4852), את ה-milestone האחרון ב-Flex 4 Beta 1, וגרסאות נוספות.

גרסאות להורדה של Flex 3

גרסאות להורדה של Flex 4

אחרי שנבחרה גרסת ההורדה, ניתן להוריד ולפתוח את קובץ ה-zip שנוצר.

שלב שני: מיקום הקבצים

את קבצי ה-SDK הפתוחים יש למקם ב-FlexBuilderInstallPath/sdks

שלב שלישי: הגדרת ה-SDK בפרווייקט ובסביבת העבודה

על מנת להגדיר שימוש ב-SDK מסויים בפרוייקט ספיציפי:

1. קליק ימני על הפרוייקט -> properties
2. בתפריט Actionscript Build Path לבחור את ספריית ה-SDK שבה רוצים להשתמש
3. בתפריט Actionscript Compiler לבחור את ה-SDK מתוך הרשימה

על מנת להגדיר שימוש ב-SDK מסויים כברירת המחדל של כל הפרוייקטים:

1. לפתוח בתפריט הראשי: window->prefrences
2. בחירה בקטגוריה Flex->Installed Flex SDKs
3. הוספת ה-SDK החדש לרשימה אם לא קיים, וסימון v בתיבה השמאלית להגדרה כ-default.

אפשרות נוספת: שימוש ב-Flex SDK בפלאש

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

על מנת להגדיר שימוש ב-SDK מתוך פלאש:

1. File -> Publish settings-> Flash tab
2. בחירה ב-Settings של Actionscript 3
3. בחירה ב-External library path ובחירה בספרית lib של ה-SDK הנבחר.

מפגש השקה של הטכנולוגיות החדשות של Adobe קהילת Flashoo. ערב של הרצאות ומינגלינג.

להרשמה (מספר מקומות מוגבל)

Adobe הודיעה כי הגרסה הבאה של Flex Builder/Gumbo תקרא Flash Builder, וזאת בהתאם לתוכניות הרחבת ה-Brand של Flash כדוגמת Flash Platform/Player/Lite/Catalyst וכו'.

הסיבה העיקרית במקרה זה היא הרצון לקשור את Flash Catalyst ואת סביבת ה-Flex היות ושתיהן עובדות ביחד על Flex SDK.

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

אז עובדים עם ה-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

אפליקציית AIR חדשה של Benjamin Dobler לעריכת קבצי flv, שילוב קבצי flv נוספים, שילוב אודיו, עריכה והכנסה של metadata, cuepoints ו-keyframes. מבחינת אפליקציית UI והישומים שלה היא כרגע היחידה שכתובה ב-flex על AIR שמבצעת את הפעולות האלה.

כמובן שישנם כלים אחרים כמו flvmdi , flvtool2 ו- ffmpeg שגם מאפשרים עריכה ושילוב קבצים נוספים, אבל מבחינת עבודת עריכה פרטנית לסרט ספיציפי (אין תמיכה ל-batch ול-command line) אני מעריך שזו אחלה אפליקציה.

אהלן. אני ממשיך בענייני הקורסים.
בתאריכים 16-17 בחודש הבא אני מעביר קורס AS3 hands-on למתכנתים. הקורס יהיה מבוסס על המון תרגול ולכן מומלץ מאוד להביא מחשב נייד לעבודה בכיתה יהיו מחשבים בכיתת הלימוד לעבודה תוך כדי ההרצאות. חלק מהנושאים שיועברו הם:

1. Classes
2. Working with display list
3. RegEx
4. Video
5. Storage on client side
6. E4X
7. Binary sockets

ועוד נושאים רבים וטובים. הקורס יועבר במכללת הייטק דרך חברת DSP-IP שדרכם אני גם מבצע את ההרצאות ב-Adobe.

לפרטים ושאלות אתם יכולים לפנות לתמרה וב-8850956 09, או בתגובה לפוסט הזה

נשתמע
גדי

כהמשך להדרכות ב-Adobe ישראל, אני מעביר סמינר נוסף ביום חמישי הבא 26/6, בנושא פיתוח ב-AS3. הסמינר הוא הקדמה לקורס של מספר ימים שאותו אעביר באותה מסגרת. הסמינר יתחלק לשני חלקים, כמו בפעם הקודמת. החלק הראשון יתמקד בתאוריה ויכלול הסברים לגבי הארכיטקטורה של הפלאש, שינויים מ-AS2 הסברים על הפיצ'רים החדשים של AS3 ומעבר על אלמנטים בסיסיים בשפה.

החלק השני של הסמינק יכלול דוגמאות קוד וקצת hands on של נושאים מעניינים ב-AS3

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