الدرس الثالث :
كيفية انشاء زر button

سنتعلم في هذا الدرس طريقة إنشاء زر بسيط كما شاهدت في المثال المرفق. في الواقع أن أسلوب عرض الأزرار المعدة بإستخدام برنامج فلاش مماثلة نسبيا للأزرار المتحركة التي تعد بإستخدام برامج الأنيميشن مثل Animation Shop أو بإستخدام كودات الجافا، إلا ان أوجه الإختلاف تكمن في كونك تستخدم تقنية هي الأحدث في مجال الجرافيكس والتصاميم إضافة الى المؤثرات الرائعة التي يمكنك ادخالها على الزر مع فلاش. أتمنى أن اوفق في عرض خطوات العمل، سأستخدم مثالا مبسطا مدعما بالصور التوضيحيه لتسهيل الأمر على الأخوة المبدئيين في إستخدام فلاش. بإختصار عملية اعداد الزر تقوم على مرحلتين، الأولى انشاء الزر والثانية ادراج الزر في ملف الفيلم...... هذا كل مافي الأمر، قطعة من الكيك :*)

لنبدأ بإنشاء ملف العمل. من القائمة الرئيسيه للبرنامج إختر File>New
سنقوم الآن بتحديد مقياس عرض Width وإرتفاع Height الفيلم. بالإضافة الى اختيار لون خلفية الفيلم Background. من القائمة الرئيسيه إختر Modify>Movie ثم أدخل القيم الرئيسيه للعرض والإرتفاع ولون الخلفيه.
http://www.arabkom.com/up/uploading/fig10-1.gif


سنبدأ الآن بإعداد الزر وهو ما يمثل المرحلة الأولى. من القائمة الرئيسية إختر Insert>New Symbol تحصل على مربع حوار . أكتب إسما للزر ثم إختر Button وإضغط Ok.

http://www.arabkom.com/up/uploading/fig10b.gif

سينقلك البرنامج الى صفحة إعداد الزر. لاحظ في شكل 10-3 الإعدادات الخاصة بالزر وهي كما يلي:

Up: هذا الجزء يمثل الشكل الخارجي للزر كما تراه على الشاشة لأول مرة.

Over: يمثل هذا الجزء هيئة الزر عند ملامسة الماوس له.

Down: الشكل الذي يظهر عليه الزر عندما تنقر عليه بالماوس.

Hit: هذا الجزء يمثل الإطار الحي للزر، إلا انك لن تحتاج الى استخدامه أثناء اعداد الزر. سأتطرق الى استخدامه لاحقا ان شاء الله.

http://www.arabkom.com/up/uploading/fig10-2.gif

سنستخدم أدوات الرسم والتلوين لإنشاء الجزء الأول من الزر. إختر أداة رسم المستطيل وارسم مستطيلا ذو مواصفات إختيارية أو كما في الشكل المقابل. ثم استخدم أداة النص لكتابة النص.

لاحظ بأنك حصلت على دائرة سوداء في خانة Up وهذا يمثل الإطار الرئيسي الخاص بهذا الجزء من الزر.
http://www.arabkom.com/up/uploading/fig10-up.gif
http://www.arabkom.com/up/uploading/fig10-3b.gif

استخدم مؤشر الماوس لتظليل الجزء الثاني من الزر وهو Over. سنقوم الآن بإدخال إطار رئيسي في هذه الخانة. إضغط مفتاح F6 في لوحة المفاتيح ستحصل على دائرة سوداء عبارة عن نسخة لما كنت قد اعددته في خانة Up. أختر أداة التحديد ثم إنقر مرة واحدة داخل المستطيل لتظليله ثم إختر سطل التلوين وحدد لونا كالأزرق مثلا وانقر مرة اخرى داخل المستطيل. بنفس الطريقة، اختر اداة النص وانقر مرة واحدة على النص وظلله ثم غير لونه الى الأخضر، كما في الشكل 10-6 المقابل.

لاحظ أيضا بأنك حصلت على دائرة سوداء في خانة Over وهذا يمثل الإطار الرئيسي الثاني والخاص بهذا الجزء من الزر
http://www.arabkom.com/up/uploading/fig10-over.gif
http://www.arabkom.com/up/uploading/fig10-4b.gif

الجزء الثالث من الزر هو Down. أدخل أطارا رئيسيا في خانة Down بإستخدام مفتاح F6. سنقوم الآن بتصغير حجم الزر في هذه الخانة لإدخال تأثيرا خاصا. من القائمة الرئيسية إختر Windows>Inspectors>Transform. ستحصل على مربع الإعدادات، أدخل القيمة 90 في خانة Scale ثم إضغط مفتاح Enter.
http://www.arabkom.com/up/uploading/fig10-scale.gif

في هذه الخطوة سنقوم بتنسيق الأجزاء الثلاثة وترتيب مكان كل جزء. استخدم الماوس وظلل الجزء الأول وهو Up ثم من القائمة الرئيسية إختر Modify>Group. هذه العملية ستربط المستطيل مع النص بالتالي يسهل عملية نقل الزر كاملا. عد الآن الى القائمة الرئيسية واختر Modify>Align. سنقوم الآن بتوسيط هذا الجزء الزر. إضغط هنا لمشاهدة خيارات التوسيط.

كرر خطوة Group و Align مع الجزئين الآخرين من الزر عن طريق تكرار الخطوة 7.
http://www.arabkom.com/up/uploading/fig10-5.gif

الخطوة الأخيرة في المرحلة الأولى لإعداد الزر تتمثل في إدخال ملف صوتي في الجزء الثالث Down من الزر كما في المثال. هذه الخطوة بسيطة جدا، سنستعين بأحد الملفات الصوتية الموجودة في مكتبة فلاش أو الـ Library. بإستخدام الماوس ظلل الجزء Down من الزر كما تشاهد في الشكل المقابل ثم من القائمة الرئيسية إختر Libraries>Sounds, شكل 10-10, ستحصل على قائمة ببعض الملفات الجاهزة، إختر ملفا ثم اسحبه والصقه فوق الزر مباشرة. عندها ستحصل على مؤشر متموج في خانة Down
http://www.arabkom.com/up/uploading/fig10-lib-sond.gif
http://www.arabkom.com/up/uploading/fig10-lib-sond2.gif

إنتهينا الآن من المرحلة الأولى وهي إنشاء الزر. سنعود الآن الى الملف الفيلمي وندرج فيه الزر الذي أعددناه سوية. في أعلى يمين البرنامج تجد أيقونتين، إضغط الأيقونة اليسرى ثم إختر Scene 1. ستؤخذ الى الملف الفيلمي حيث تجد شريط الإطارات والطبقات وغيرها
http://www.arabkom.com/up/uploading/fig10-7.gif

من القائمة الرئيسية إختر Window>Library حيث تحصل على مكتبتك التي تحتوي الزر .
http://www.arabkom.com/up/uploading/fig10-8.gif

استخدم الماوس لتظليل إسم الزر ثم اسحبه تدريجيا والصقه على الخلفيه . لاحظ بأنك حصلت على دائرة سوداء داخل الإطار1 وهذا يعني ان الإطار يحتوي الزر وبأنه ليس فارغا.
http://www.arabkom.com/up/uploading/fig2-4.gif

سنقوم الآن بإضافة الوصلة التي سينقلنا اليها الزر عند النقر عليه. من القائمة الرئيسية اختر Modify>Instance. إختر لسان التبويب Actions ثم إضغط ايقونة (+) ثم إختر Get URL
http://www.arabkom.com/up/uploading/fig10-11.gif

الشكل 10-16 يبين إعدادات خاصة بالزر. اكتب في مربع URL: عنوان الوصلة. حدد بقية الخيارات كما تظهر في الشكل.

لتجربة الزر ضمن المتصفح اختر File>Publish Preview>HTML

http://www.arabkom.com/up/uploading/Untitled-1.jpg

هي المثال
WIDTH=80 HEIGHT=40

يعطيك الف عافية مهندس منتصر
درس رائع جدا لمبتدئ مثلي على الرغم من اني لم اقم بتجربته بعد
في انتظار البقية

الله يعافيك اخي الكريم com eng
ان شاء الله اشوف تطبيقك للدرس.
حتي تكون علي تواصل معنا.

أخي الفاضل شرحك أكثر من رائع جزاك الله خيرا عليه

بالفعل استفدت منه كثيرا

ولكن لى طلب بسيط


قمت بتصميم ملف فلاش به العديد من الازرار واريد ان اربط هذه الازرار بصفحات من تصميمي على الكمبيوتر الخاص بي لكي اقوم برفعها بعد ذلك

لاني لاحظت اننى عندما اقوله get url لابد من اكتب http:/ وبالطبع هذه الصفحات لم يتم رفعها على الشبكة فهمي موجوده فى درايف C فولدر MY web واخيرا home.htm

اعتذر للازعاج و اريد النصيحة للاهمية