سلام. مي خوام در اين مقاله به وسيله ي يک
مثال بسيار ساده، نحوه ي ساخت يک سند XML و Load داده هاي آن، داخل يک پروژه ي فلش
و همچنين نحوه ي استفاده از آن داده ها را مورد بررسي قرار بدم. نکته جالب در مورد
اين tutorial مدت زمان اجرا و اعمال آن است که براي يک کاربر مبتدي فلش نيز بيش از
10 دقيقه طول نخواهد کشيد! پس، بي هيچ اطلاف وقتي کار را آغاز مي کنيم:
ساخت يک XML Document (سند اکس.ام.ال) :
بارها و بارها پيش اومده که در تالار هاي گفتمان مختلف، اعم از فارسي و انگليسي به
اين قبيل سوالات، مبني بر استفاده از XML در بارگذاري داده داخل پروژه هاي فلش
برخورد کنم. تصميم گرفتم با ساخت يک مثال ساده و سريع به شما نشان بدم که به چه
سادگي ميتوانيم داده را از يک صفحه ي XML خوانده و در Flash بارگذاري کرده و از آن
استفاده کنيم.
در ابتدا، من يک فايل XML به نام "images.xml" مي سازم. به اين
ترتيب:
<images>
<image image="img/30Sharp.png"
caption="Persian Developers Resource in
30Sharp.com"/>
</images>
|
به علت اعمال سهولت در مثال، تنها به يک node کفايت کردم. صفحه ي XML اي را که
ايجاد کرده ايم در دايرکتوري به نام "xml" ذخيره مي کنيم.
ساخت پروژه ي فلش (FLA) :
نرم افزار Adobe
Flash خود را باز ميکنيم. يک پروژه ي جديد باز کرده، نام آن را به دلخواه خود
انتخاب مي کنيم (من در اين مثال اسم main رو در نظر گرفتم...). يک کنترل text tool
به پروژه اضافه مي کنيم. در پنجره ي خصوصيات (properties panel) اين کنترل موارد
زير را اعمال مي کنيم:
- نوع کنترل را Dynamic Text انتخاب مي کنيم.
- نام
نمونه ي موجود از اين کنترل (خاصيت Instance name) را به دلخواه (در اينجا عبارت
myText) وارد مي کنيم.
بايد دقت داشته باشيم که حتما براي قلم (Font) مورد نظر
نوع قلم، حالت حروف بزرگ (uppercase)، حالت حروف کوچک (lowercase) و نشانه گذاري ها
(punctuation) را در پروژه ي خود Embed کنيم. به اين صورت که با زدن دکمه ي
...Embed پنجره ي Character Embedding ظاهر شده و در آن تمامي موارد مورد نظر ما در
دسترسمان مي باشد و ما مي توانيم با انتخاب آن موارد و زدن دکمه ي Ok آنها را به
پروژه ي خود داخل کنيم...
حال يک مستطيل رسم کرده و بعد دکمه F8 را فشار مي
دهيم تا مستطيل ما به يک movie clip تبديل شود (يا از طريق ديگر : روي مستطيل کليک
راست کرده و از منوي محاوره اي که باز مي شود گزينه Convert to Symbol را انتخاب مي
کنيم و در پنجره اي که ظاهر مي شود با وارد کردن يک نام دلخواه و انتخاب گزينه
movie clip مستطيل را به يک شي movie clip تبديل مي کنيم). در پنجره ي خصوصيات اين
شي در قسمت Instance Name عبارت myImageHolder را (باز هم به دلخواه) وارد مي کنيم.
حال، در مرحله بعد يک لايه به time line پروژه خود اضافه مي کنيم و در Frame اول آن
لايه، قطعه کد زير را وارد مي کنيم:
// تعريف يک متغيير از نوع اکس.ام.ال
var
xml:XML = new
XML();
// فضاهاي خالي بين حروف را از بين مي بريم
xml.ignoreWhite =
true;
// تابعي
که هنگام بارگذاري صفحه ي اکس.ام.ال صدا زده مي شود
xml.onLoad =
function()
{
// تعداد گره هاي
فرزند موجود داخل صفحه ي اکس.ام.ال را به ما مي گويد
var nodes =
this.firstChild.childNodes;
// تعداد آيتم هاي موجود داخل صفحه ي اکس.ام.ال را
به ما مي گويد
numOfItems = nodes.length;
//
اضافه کردن آيکون ها
for (var
i = 0; i<numOfItems; i++)
{
//عکس را به جاي کنترل کليپ پروژه جايگزين مي کند
myImageHolder.loadMovie(nodes[i].attributes.image);
// عبارت موجود در صفحه ي اکس.ام.ال را در جاي
خود قرار مي دهد
myText.text
= nodes[i].attributes.caption;
}
};
// بارگذاري صفحه ي اکس.ام.ال
xml.load("xml/images.xml");
|
| |
پروژه ي فلش خود را کنار پوشه "xml" که قبلا ايجاد کرده ايم ذخيره مي کنيم و يک
پوشه جديد به نام "img" نيز در کنار اين دو مي سازيم و عکس دلخواه خود را داخل آن
قرار مي دهيم. حال اگر پروژه ي خود را اجرا کنيم، خواهيم ديد که محتواي پروژه به چه
صورت توسط XML دستخوش تغيير مي شود... به عکس زير توجه کنيد:
بسيار خوب. همين...! به هيمن سادگي و به همين آساني توانستيم يک پروژه ي فلش با
استفاده از يک صفحه ي XML بسازيم و از آن استفاده کنيم. از اين به بعد بسته به
سليقه و ابتکار خودتون، مي توانيد به اين پروژه دامن زده و به ميل خودتون آن را
گسترش داده و کارهاي پيچيده تر و تکميل تري انجام دهيد.
در ضمن، فايل پروژه ي
فوق را در بالاي صفحه، از لينک "دانلود" به راحتي مي توانيد دانلود کنيد و راه حل
انجام کار را به صورت شهودي تر مشاهده کنيد.
ممنون از همراهيتون....
موفق و
مويد باشيد.
منبع : برگرفته از مجموعه مقالات
ActionScript.org