גלריית פלאש על בסיס XML מתנה!

 

בחודשים האחרונים כמעט ולא היה לי זמן לכתוב שום פוסט וזאת מכוון ועבדתי על האתר של חברת בניית האתרים שלי – דקור. עכשיו לאחר שהאתר על הרגליים התפניתי לעשות מה שהרבה זמן רציתי כבר לעשות – לפרסם כאן פוסט. אז כמובן גם הפעם אני מצ'פר אתכם במתנה, והפעם גלריית פלאש מקורית (לא, לא כמו כל הגלריות שאפשר לבנות עם jQuery), שטוענת תמונות מתוך XML ומייצרת מסך מלא תמונות וכאשר לוחצים על תמונה היא נפתחת באמצעות lightbox. קרדיט גדול לאיתי גורן שאיתו בניתי את הגלריה. תהנו.

picWin - גלריית פלאש עם טעינה מתוך XML

picWin - גלריית פלאש עם טעינה מתוך XML

אפשרויות:

1. הוספת תמונות מתוך XML –
ניתן להוסיף תמונות לתוך קובץ pics.xml. כל תמונה תקבל את המאפיינים הבאים:

1
2
3
4
5
6
<pic>  
       <dir>picDir/normal</dir>
       <big_dir>picDir/big</big_dir>  
       <name>1.jpg</name>  
       <desc>picture title</desc>  
     </pic>

dir – התיקייה בה תמצא התמונה לפלאש (התמונה הקטנה)
big_dir – התיקייה בה התמונה ל-lightbox (התמונה הגדולה)
name – שם קובץ התמונה (בשני התיקיות!)
desc – יופיע כתיאור התמונה בתוך ה-lightbox.

2. תוכלו לשנות את מספר הריבועים בפלאש באמצעות שינוי שורה מספר 6 בקובץ project.fla:

1
var fdata:fData = new fData(5,8,stage.stageWidth,stage.stageHeight,"height");

החליפו את הספרה 5 במס' השורות הרצוי ואת הספרה 8 במס' העמודות הרצוי.

שתפו את הפוסט הזה:
http://www.htm.co.il/wp-content/plugins/sociofluid/images/digg_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/google_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/myspace_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/facebook_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/twitter_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/bookmark_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/email_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/print_48.png

עוד באותו נושא:

 

דיון פתוח

מה אתם חושבים? רשמו את תגובתכם.

תגובות
אשרNo Gravatar 31 בינואר

מדהים!
אני אשתמש בזה כדף כניסה לאתר חדש שאני בונה.
שאלה: אתה בנית את הפלאש הזה?

[תגובה]

אורן רוט

אני שמח שאהבת…אתה מוזמן לפרסם את כתובת האתר שזה יהיה מוכן ונראה את המימוש שלך.

כמו שציינתי, אני וחבר טוב שלי איתי גורן בנינו את הגלריה.

[תגובה]

אשר

בשמחה

[תגובה]

דנית

מדהים!!!!!

[תגובה]

רונן

מעניין מאוד!

[תגובה]

ליאון אטקינסוןNo Gravatar 20 במרץ

מגניב,
אני לא כ"כ רואה איך אני משתמש בזה
אולי רק בשורה אחת.

[תגובה]

קרן לי מדמוןNo Gravatar 22 במרץ

WOW אחלה גלרייה.
תודה :)

[תגובה]

לורןNo Gravatar 7 באפריל

אני מנסה לפתוח 2 גלריות או אפילו 3 באותו אתר אך אני לא יכול לשנות את הקובץ של הpics ולכן כל פעם הוא פותח את אותן תמונות.. איך אני יכול ליצור 3 גלריות שכל אחת תקבל תמונות מתיקיה שונה?? תודה

[תגובה]

אורן רוט

בתוך קובץ הAS מוגדר שם קובץ הXML – בדוגמא שלנו "pics.xml". כל שעליך לעשות הוא לפתוח את קובץ הAS לשנות את שם קובץ הXML לשם המבוקש ולרנדר מחדש את הפלאש, כך שכל SWF יפנה לקובץ אחר.

[תגובה]

אוריNo Gravatar 14 באפריל

אחלה גלריה! תודה
רק שאלה, משום מה כשהתמונות הגדולות נפתחות אצלי, תיאור התמונה מופיע בעברית – תקין, אך הטקסט: "תמונה מס' 1 מתוך 40" מופיע כג'יבריש… יש מושג למה ואיך לתקן?

[תגובה]

אורי

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

[תגובה]

אורן רוט

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

אל דאגה מהמסך השחור, שים את קובץ הSWF שנוצר בתיקייה הרצויה והכל יעבוד.

[תגובה]

אורי

לצערי, עדיין לא הצלחתי לפענח את הבעיה.
סדר הדברים כפי שנעשו על ידי:
1. בקובץ fData שבתקיית classes את שם הקובץ pics ל- pics2.
2. שיניתי את שם הקובץ pics עצמו ל-pics2.
פתחתי את קובץ הFla ורינדרתי מחדש את הפרויקט.
3. העלתי את הקבצים לשרת וזה מה שאני מקבל:
http://www.dnarc.co.il

אורי

שכחתי לציין שבזמן הרינדור בפלאש הוא מודיע על compiler errors – 20 reported
אז נראה לי שהבעיה היא ברינדור…

אורן רוטNo Gravatar 14 באפריל

כן, זה פרט שחשוב להזכיר.
כדאי שתציין מה השגיאות שהוא מציג לך.

למיטב זכרוני השתמשתי בספריית ההנפשה tweenlite אז אתה צריך להוריד אותה ולשים אותה בתיקיית הפלאש או לחלופין בתיקיית הAS שלך.

הקוד שנתתי כאן בפוסט הוא קוד פשוט למימוש אבל על-מנת לערוך צריך להבין קצת פלאש (קרי, לקרוא את הcomile errors ולפעול בהתאם) ואז זה לא מסובך כל-כך.

[תגובה]

אורי

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

עכשיו הכל עובד מצויין!

תודה רבה – עבודה מעולה!

[תגובה]

אורן רוט

אני שמח שהסתדרת :)

אתה מוזמן לתת לינק לאתר שמופיע בו בגלריה שנוכל להסתכל במימוש שלך…

[תגובה]

אורי

שאלה אחרונה –

איך שולטים בגודל הגלריה?
האם ניתן להקטין אותה קצת?

[תגובה]

אורי

מצאתי את הדרך – תודה!

ליאור הרשקוNo Gravatar 4 במאי

היי , אפשר להפוך את זה לגלריה וידאו?

[תגובה]

אורן רוט

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

[תגובה]

21No Gravatar 1 ביוני

קטלני

[תגובה]

הנריNo Gravatar 11 ביוני

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

[תגובה]

אורן רוט

הכל קשור למיקום הקבצים.

אתה חייב לשים תמיד את הXML בצמוד לHTML התמונות יכולות להיות יחסיות וגם הSWF.

[תגובה]

חייםNo Gravatar 25 במאי

בדיוק כזה דבר חפשתי , הבעיה שאני צריך אותו בפרופיל אחר זיות הפוכה 1000*600
ושהמסגרת תהיה שחורה במקום לבן ,
הנה מה שנסיתי לעשות http://tuxedo.co.il/1/ties.html
בנוסף שבוחרים תמונה היא נפתחת כזה למטה

זה אמור להשתלב לתוך עמוד כזה http://tuxedo.co.il/1/

אם יש משהו שיוכל לעזור אני ישמח , חיים

[תגובה]

אורן רוט

אתה יכול לעשות הכל עם קצת ידע בAS3…לצערי אני לא אוכל לעשות זאת בשבילך :)

[תגובה]

חיים

סורי על הבורות מזה AS3 ?
ורק לשנות תשורות כמו שרשמת לפתוח תקובץ project.fl בפלאש לא מצאתי מה לשנות שם ( מודה אני ופלאש לא חברים)

[תגובה]

אורן רוט

AS3 זה השפה שבה כותבים קוד בפלאש. אם אתה לא מכיר אתה יכול למצוא מדריכים טובים באינטרנט ללימוד השפה.

fbsNo Gravatar 19 בספטמבר

אהלן, הורדתי והעלתי לאתר את כל החבילה כמו שהיא על מנת לבדוק שהכל פועל. אבל משום מה הוא לא מרה את התמונות זה האתר: fbs.co.il אשמח לעזרה!

[תגובה]

המיכאלי דניאלNo Gravatar 6 בנובמבר

בהצלחה, תודה רבה.

[תגובה]

תהיליםNo Gravatar 23 בנובמבר

פצצה , אני הולך לעוף על זה באתר שלי
מקווה שיעבוד טוב

זה האתר http://www.haleluya.info אם אתם רוצים לבדוק אם עשיתי את זה טוב אני שם את זה כפרסומת – ושם קישור בלי נדר לפוסט הזה

[תגובה]

אורן רוט

הסתכלתי באתר ולא ראיתי, איפה מיקמת אותה?

[תגובה]

יוני

כי העורך תוכן לא מצליח לזהות את זה, מה אני עושה ?

[תגובה]

ניקוי חלונותNo Gravatar 23 בנובמבר

יופי של דבר

[תגובה]

אופיר דהאן,שמלות כלהNo Gravatar 23 בנובמבר

תודה רבה, גלריה יפה גם לאתר בתחום שלי

[תגובה]

דוכני מזוןNo Gravatar 27 בנובמבר

איזה יופיייייייי

[תגובה]

גינות גגNo Gravatar 28 בנובמבר

תודה, אם אני עובד עם מנהל תוכן איפה אני מכניס את הקוד?

[תגובה]

ניקוי שטיחיםNo Gravatar 1 בדצמבר

אפשר לשלב את זה בתוך פלאש קיים?

[תגובה]

ניקוי חלונותNo Gravatar 6 בדצמבר

וואו תודה, מעולה

[תגובה]

תיקון גגותNo Gravatar 7 בדצמבר

איזה גלריההההההה

[תגובה]

אורלנדוNo Gravatar 14 בדצמבר

כיף לקרוא יעזור לי מאוד

[תגובה]

עיצוב לוגוNo Gravatar 15 בדצמבר

איזה דרך מגניבה להציג גלריית לוגואים… רעיון גדול תודה רבה

[תגובה]

גמילה מעישוןNo Gravatar 25 בדצמבר

יש אפשרות לערוך את זה בפלש?

[תגובה]

אורן רוט

כמובן.

[תגובה]

אורן רוטNo Gravatar 1 בינואר

כן

[תגובה]

אתיNo Gravatar 11 בינואר

יש לך המלצה על עורך חינמי לקובץ פלש כדי לשנות את מספר השורות והטורים כמו שהצעת לעשות?

[תגובה]

אורן רוט

לצערי, לא…

[תגובה]

אתי

אי אפשר לתת את זה כפרמטרים חצוניים שיותר קל יהיה לשחק איתם. חוצמזה – אפשר בקובץ האינדקס להוסיף עוד עריכות של כותרת וכו' כדי לשלב את זה באתר ?

[תגובה]

אורן רוט

האמת היא שאפשר אבל מכיוון וזאת עבודה מאוד התנדבותית ומאוד ישנה, זה כבר לא יקרה.

אני מאוד אשמח אם מישהו יקח את הפרוייקט הזה וישחרר אותו עם פרמטרים חיצוניים :)

כתיבת תגובה

אבטחה: שאלת אבטחה

ניסיון