[سمير الليل]

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

دورة تعلم عمل أزرار تفاعلية ..Rollover button : الجزء الأول
البرنامج المستعمل : Macromedia Flash 8 PRO
الدرس يمكن تطبيقه مع النسخ الأخرى

الدورة ستتكون إن شاء الله من ثلاثة أجزاء
ستكون قادرا في نهايتها على :
تصميم أزرار و قوائم تفاعلية Rollover button و ربطها بالشبكة
تصميم أزرار و قوائم تفاعلية Rollover button متحركة
طبط تصرفات الأزرار عبر ربطها بأكواد معينة من نافذة Action
إضافة الأصوات للأزرار حسب وضعياتها
إضافة إلى تلميحات و تقنيات أخرى

المستوى : مبتدئ - متوسط

و على بركة الله نبدأ

القائمة التي سنقوم بتصميمها هي هذه و هي بامتداد swf يعني فلاش و حجمها 5 كيلو و نصف

من هـــــــــــــــــــ ــــــــــــــــــــ نا

افتح برنامج ميكروميديا فلاش
و اختر عمل جديد بالمقاسات التي تناسبك
الآن سنشرع في تصميم زر تفاعلي
من قائمة Insert اختر New symbol

من النافذة القافزة علم خيار -- button -- و سم زرك

من قائمة الأدوات اختر Rectangle tool أو اضغط مباشرة على الحرف R لتفعيلها

ثم من هنا اضغط على الزر البارز لتدوير أركان المستطيل

ثم أدخل القيمة المناسبة لشدة الإنحناء المرغوبة

ثم ارسم شكلا كهذا البارز في الصورة أو آخر من ابتكارك .. و اضبط ألوان الإطار و الوسط
حسب ما يناسبك

و هذا سيكون مظهر الزر في الوضعية UP
نذهب بعدها إلى الوضعية Over و نضغط بالزر الأيمن

و نختار Isert keyframe أو نختصر ذلك و نضغط F6

بعدها و في الوضعية Over نغير الألوان بما يناسب عملنا -- من هنا

و نتابع بنفس الطريقة حتى نحصل على مظاهر مختلفة في الوضعيات الأربع

بعد ذلك ننتقل إلى صفحتنا الأولى Stage عبر الضغط على زر Scene 1

بعدها نتجه إلى المكتبة Library حيث سنجد الزر الذي صممناه و نقوم بسحبه إلى الصفحة أي ال Stage عدة مرات بما يناسب روابط موقعك أو تصميمك

بعدها نختار أداة الكتابة بالضغط على الحرف T
و نكتب فوق كل زر نصا بما يناسب مواضيعنا و روابطنا
و اضبط إعدادات النص من هنا طبعا على ذوقك
و لا تنس جعل تفعيل خاصية Static text

لتحصل على قائمة كهذه

الآن سنقوم بإملاء الأوامر على كل زر ... كل واحد سيقوم بفتح رابطه ...
لأجل ذلك نحدد الزر -- تأكد أنك حددت الزلر و ليس النص -- و نذهب إلى النافذه Action
التي توجد أسفل صفحة العمل

و أدخل الكود التالي

on (rollOver) {
         gotoAndPlay(2);
}
on (rollOut) {
         gotoAndPlay(10);
}
on (release) {
         getURL("هنا أدخل رابطك كاملا يعني http://...siteweb.net");
}

و لا تنس إدخال الرابط بين القوسين كما ذكرت و ليكن كاملا

و كإضافة إن لم يكن زرك تفاعليا أي يغير مظهره بمجرد مرور الفأرة عليه فلا داعي لكتابة الكود كاملا بل اكتف بهذا

 on (release) {

         getURL("هنا أدخل رابطك كاملا يعني http://...siteweb.net");
}

تابع مع باقي الأزرار بنفس الطريقة و غير الرابط الخاص بكل واحد

و الآن مبروك عليك القائمة التفاعلية التي صمتها بيدك
لتجريبها اضغط Ctrl+Enter
جربت .. كلو تمام .. أغلق نافدة التجريب و لنتابع
قم بتحديد كل الأزرار و النصوص بالسهم كما تفعل إذا رغبت في تحديد ملفات كثير ة لحدفها أو فتحها يعني اضغط و جر السهم حتت تلحظ ما يلي

و الآن سنجعل القائمة كعنصر واحد لتسهيل إضافتها كاملة في تصميماتنا لأجل ذلك اضغط بزر
الفأرة الأيمن على التحديد و اختر Convert to symbol

وكالعادة نسميها و نجعلها كما يلي

الآن ستجدها بالمكتبة و يمكنك استعمالها مع أخريات أفقية أو عمودية صممتها
بسحبها إلى صفحة العمل

و عند انتهائك يمكنك تصدير العمل ككل او فقط قائمتك لإدراجها في صفحة html بالدريمويفر أو غيره
من قائمة File اختر Export ثم Export movie و تابع بضغط ok

مبروك عليك القائمة و لا تنس التطبيق أن تعرضه هنا
أو مشكلة واجهتك

و الدرس المقبل سيكون لكيفية جعل الأزرار تتحرك -- تأثير الزوم --
بعد أن تتحقق أهداف الأول
و تجدرر الإشارة إلى التالي
لست مجبرا بتصميم أزرارك في برنامج الفلاش
يمكنك عملها بالفوتوشوب أو غيره و استيرادها بالفلاش
و المهم أن تكون شفافة بالامتداد المتجهي png
و تذكر أن تصمم حسب الوضعيات الأربع up - over - down - hit
يعني لكل زر أربعة أشكال

و أتمنى ان أكون قد توفقت في الشرح
و الحقوق مفتوحة في غير النسب .. و جزى الله خيرا من ساهم في نشره
دعواتكم الطيبة
أخوكم

[lavender]

يبدو درس شيق ×× خصوصا لطالبة مبتدئة مثلي×× .. تحاول السير في أغوار الفلاش وكشف أسراره
على الرغم من طوله .. سأحاول تنفيذة ..

وشرح مميز ..
عوفيت أخي ..
ولا حرمك الله الأجر والمثوبة

[ريم]

درس جميل فعلاً

كنت عن جد محتاجته

تحياتي لمجهودك الرائع

^^

[wael_eg]

الله لا يحرمنا منك اخي الكريم
وان شاء الله اقدر اقوم بتنفيذه

شكرا لك

[ولد جلفار]

درس عجيب .... تسلم

[سنفورة المسنفرة]

هلالالالالالالالالا وغلالالالالالالالالا لالا


مشكوووووووور على الدرس بس الصووووووور مو طالعة لو تحطها مرررررررة ثانية يكون حلو



سلالالالالالالالالال الالالالالالالالالال الالالالالالام

[عمرو المصري]

حياك الله و بياك اخي الكريم

رجاء اخي اعد رفع الملف مرة اخري لانه غير موجود علي لايكوس بارك الله فيك حتي يتسني لنا المتابعة معك


في امان الله
عمرو المصري

[Chris Redfield]

السلام عليكم ورحمة الله وبركاته

شكرا لك أخي الكريم على هذا المجهود الرائع
في الحقيقة أنا بأشد الحاجة لتعلم هذا الدرس

ولكن الصور لا تظهر أتمنى ان ترفعها مرة أخرى رجاء

ولكل جزيل الشكر أخي

مع السلامة

[arni]

سمير الليل

للأسف جميع الروابط معطله , سيتم نقل الدرس للأرشيف

بالتوفيق