‫Htm - אחלה טיפים לבניית אתרים » פלאש‬ http://www.htm.co.il ‫מדריכים ומאמרים בנושא בניית אתרים. כל יום משהו חדש ללמוד, וליישם.‬ Wed, 18 Jan 2012 09:32:13 +0000 http://wordpress.org/?v=2.9.2 il hourly 1 ‫גלריית פלאש על בסיס XML מתנה!‬ http://www.htm.co.il/2010/01/17/%d7%92%d7%9c%d7%a8%d7%99%d7%99%d7%aa-%d7%a4%d7%9c%d7%90%d7%a9-%d7%a2%d7%9c-%d7%91%d7%a1%d7%99%d7%a1-xml-%d7%9e%d7%aa%d7%a0%d7%94/ http://www.htm.co.il/2010/01/17/%d7%92%d7%9c%d7%a8%d7%99%d7%99%d7%aa-%d7%a4%d7%9c%d7%90%d7%a9-%d7%a2%d7%9c-%d7%91%d7%a1%d7%99%d7%a1-xml-%d7%9e%d7%aa%d7%a0%d7%94/#comments Sun, 17 Jan 2010 11:23:21 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=988

בחודשים האחרונים כמעט ולא היה לי זמן לכתוב שום פוסט וזאת מכוון ועבדתי על האתר של חברת בניית האתרים שלי – דקור. עכשיו לאחר שהאתר על הרגליים התפניתי לעשות מה שהרבה זמן רציתי כבר לעשות – לפרסם כאן פוסט. אז כמובן גם הפעם אני מצ'פר אתכם במתנה, והפעם גלריית פלאש מקורית (לא, לא כמו כל הגלריות שאפשר לבנות עם 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/2010/01/17/%d7%92%d7%9c%d7%a8%d7%99%d7%99%d7%aa-%d7%a4%d7%9c%d7%90%d7%a9-%d7%a2%d7%9c-%d7%91%d7%a1%d7%99%d7%a1-xml-%d7%9e%d7%aa%d7%a0%d7%94/feed/ 51 ‫Fusion Charts – דרך יפה להציג נתונים‬ http://www.htm.co.il/2009/09/17/fusion-charts-%d7%93%d7%a8%d7%9a-%d7%99%d7%a4%d7%94-%d7%9c%d7%94%d7%a6%d7%99%d7%92-%d7%a0%d7%aa%d7%95%d7%a0%d7%99%d7%9d/ http://www.htm.co.il/2009/09/17/fusion-charts-%d7%93%d7%a8%d7%9a-%d7%99%d7%a4%d7%94-%d7%9c%d7%94%d7%a6%d7%99%d7%92-%d7%a0%d7%aa%d7%95%d7%a0%d7%99%d7%9d/#comments Thu, 17 Sep 2009 08:09:53 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=425

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

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

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

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

איך עושים את זה?

טוב אז בואו נתחיל ללכלך את הידיים. נתחיל כמובן בנתונים:

Month
Income
January
$17400
February
$19800
March
$21800
April
$23800
May
$29600
June
$27600
July
$31800
August
$39700
September
$37800
October
$21900
November
$32900
December
$39800

יש לנו טבלה בה ריכזנו את כל הנתונים כעת נהפוך אותה ל-XML שמתאים ל-FusionCharts, במקרה הכינותי מראש:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<chart caption="Monthly Income - Moshe Eggs' Farm" subcaption='For the year 2008' numberPrefix='$'>
<set label='January' value='17400' />
<set label='February' value='19800' />
<set label='March' value='21800' />
<set label='April' value='23800' />
<set label='May' value='29600' />
<set label='June' value='27600' />
<set label='July' value='31800' />
<set label='August' value='39700' />
<set label='September' value='37800' />
<set label='October' value='21900' />
<set label='November' value='32900' />
<set label='December' value='39800' />
</chart>

ועכשיו להסבר:

  • העץ הראשי של הXML צריך להיקרא chart
  • המאפיינים שהגדרנו לעץ הם:
    • כותרת הגרף
    • כותרת משנה
    • וסימן התחלתי לנתונים
  • לכל נתון בטבלה (שורה בטבלה) נוסף ילד בעץ בשם set
    • שם הילד
    • ערך הילד

* לא נעשה שימוש לא בעצים ולא בילדים בדוגמא הנ"ל – במידה ואתם מתקשים להאמין/להבין כנסו ללינק הבא

זהו סיימנו עם הXML, נשמור אותו תחת השם "Data.xml" כעת נעבור לקובץ הHTML שלנו.

קובץ ה-HTML

לפני שאנחנו נכתוב את קוד ה-HTML שלנו, בואו נוריד את קובץ הפלאש אותו נפעיל להצגת הנתונים, אני השתמשתי ב-Pie2D.swf אבל אתם מוזמנים להשתמש בכל אחד מקבצי הפלאש האפשריים. (אתם יוכלים להוריד את הפלאש הבודד מהלינק שנתתי כאן או להוריד את כל הקוד של המאמר הזה ממעלה).

וכעת לקוד שמציג את הפלאש (נוסיף אותו בין תגיות ה-BODY):

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="500" height="300" id="Pie2D" >
<param name="movie" value="FusionCharts/Pie2D.swf" />
<param name="FlashVars" value="&dataURL=Data.xml&chartWidth=900&chartHeight=300">
<param name="quality" value="high" />
<embed src="FusionCharts/Pie2D.swf" flashVars="&dataURL=Data.xml&chartWidth=900&chartHeight=300" quality="high" width="500" height="300" name="Pie2D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

אנחנו יכולים לראות שהקוד כפול כיאה לקוד פלאש, בשביל להתאים לIE ושאר הדפדפנים.

בסגול - אנחנו בוחרים את קובץ הSWF שבו בחרנו להציג את הנתונים, כאן אנחנו בוחרים את סוג הגרף.

בירוק – אנחנו מקשרים את קובץ ה-XML שיצרנו

בבולט – סמנתי לכם איפה מגדירים את גודל הגרף.

  • שימו לב לשמור על נתיב נכון לקובץ הפלאש וה-XML, אני מעדיף לשים את קבצי הפלאש של FusionCharts בתקייה הראשית של האתר, במקום אחד, וכך אני נמנע מלשכפל את הקבצים כל פעם שאני רוצה ליצור גרף.

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

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

]]> http://www.htm.co.il/2009/09/17/fusion-charts-%d7%93%d7%a8%d7%9a-%d7%99%d7%a4%d7%94-%d7%9c%d7%94%d7%a6%d7%99%d7%92-%d7%a0%d7%aa%d7%95%d7%a0%d7%99%d7%9d/feed/ 1 ‫Screenr – דרך מאוד נוחה להקליט צילומי מסך‬ http://www.htm.co.il/2009/09/11/screenr-%d7%93%d7%a8%d7%9a-%d7%9e%d7%90%d7%95%d7%93-%d7%a0%d7%95%d7%97%d7%94-%d7%9c%d7%94%d7%a7%d7%9c%d7%99%d7%98-%d7%a6%d7%99%d7%9c%d7%95%d7%9e%d7%99-%d7%9e%d7%a1%d7%9a/ http://www.htm.co.il/2009/09/11/screenr-%d7%93%d7%a8%d7%9a-%d7%9e%d7%90%d7%95%d7%93-%d7%a0%d7%95%d7%97%d7%94-%d7%9c%d7%94%d7%a7%d7%9c%d7%99%d7%98-%d7%a6%d7%99%d7%9c%d7%95%d7%9e%d7%99-%d7%9e%d7%a1%d7%9a/#comments Fri, 11 Sep 2009 19:58:54 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=325

בתור בונה אתרים אני מבקר בהרבה מאוד בלוגים ואתרים שמציעים מדריכים באמצעות screencast.

האתר screenr.com מציע שירות חינמי לגמריי להקלטת צילומי מסך, אבל למה לדבר שאפשר לשמוע ולראות:

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

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

]]> http://www.htm.co.il/2009/09/11/screenr-%d7%93%d7%a8%d7%9a-%d7%9e%d7%90%d7%95%d7%93-%d7%a0%d7%95%d7%97%d7%94-%d7%9c%d7%94%d7%a7%d7%9c%d7%99%d7%98-%d7%a6%d7%99%d7%9c%d7%95%d7%9e%d7%99-%d7%9e%d7%a1%d7%9a/feed/ 2 ‫גלריית פלאש מתנה‬ http://www.htm.co.il/2009/09/10/%d7%92%d7%9c%d7%a8%d7%99%d7%99%d7%aa-%d7%a4%d7%9c%d7%90%d7%a9-%d7%9e%d7%aa%d7%a0%d7%94/ http://www.htm.co.il/2009/09/10/%d7%92%d7%9c%d7%a8%d7%99%d7%99%d7%aa-%d7%a4%d7%9c%d7%90%d7%a9-%d7%9e%d7%aa%d7%a0%d7%94/#comments Thu, 10 Sep 2009 10:17:46 +0000 ‫אורן רוט‬ http://www.htm.co.il/?p=303

היום החלטתי לצ'פר אתכם במתנה – גלריית פלאש שמובססת על בסיס נתונים של XML.

את הגלרייה השגתי מצוות אומנים מוכשר מאוד parker&kent – לקחתי את הגלריה עיברתתי אותה לגמריי (שתדעו לכם מאוד קשה לתרגם לעברית) ועכשיו היא מוכנה להורדה שלכם ולשימוש בכל פרוייקט שאתם צריכים גלריה.

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

אז תהנו, אני אשמח לקבל פידבקים כאן בתגובות.

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

]]> http://www.htm.co.il/2009/09/10/%d7%92%d7%9c%d7%a8%d7%99%d7%99%d7%aa-%d7%a4%d7%9c%d7%90%d7%a9-%d7%9e%d7%aa%d7%a0%d7%94/feed/ 14