التعامل مع الازرار فى الفلاش بشكل احترافى

رموز الأزرارsymbol button :-- الرموز من هذا النوع هي التي تمكن المشاهد من التفاعل مع الفيلم عن الأزرار وبالتالي هذه الرموز هي تستجيب لأحداث الفأرة المختلفة من click و double click وغيره ..
طبعا طريقة إنشاء رموز من هذا النوع هي تشبه طرق إنشاء الرموز السابقة فهي كالتالي:--
من قائمة insert أختر أمر new symbol لتظهر لك النافذة التالية ولكن اختار منها الخيار button وسمي الرمز كما تشاء :

ولكن بعد الضغط على ok ستلاحظ أنك سوف تنتقل إلى نافذة بها خط زمني مميز كالتالي :--## up:هذا الإطار يمثل مظهر الزر عندما لا يكون مؤشر الفأرة فوقه .
##over: هذا الإطار يمثل مظهر الزر عندما يكون مؤشر الفأرة فوقه .
##down:هذا الإطار يمثل مظهر الزر عندما ينقر المستخدم فوقه باستخدام مؤشر الفأرة .
## hit: هذا الإطار هو المكان الذي يمكنك فيه تحديد المنطقة التي سيستجيب فيها الزر لحركات مؤشر الفأرة .في الغالب يتم وضع كائن مصمت في هذا الإطار . من الممكن أن يكون هذا الكائن المصمت مختلفا في الحجم أو الشكل عن الزر نفسه ..ضع في اعتبارك أنه لن تظهر البنود الموجودة في هذا الإطار في الفيلم الرئيسي ..
*ستتضح الأمور أكثر من خلال التطبيق التالي 0000
1-ولنبدأ الآن في عمل الزر 000000طبعا بعد قيامك بعمل رمز جديد من نوع button ستنتقل إلى نافذة تحتوي على خط زمني مميز يحتوي على أربع إطارات قم الآن بتحويل هذه الإطارات إلى إطارات رئيسية وذلك لكي تقوم بعمل حدث لكل إطار منهم
كيف ستحولها إلى إطارات رئيسية ؟؟وذلك عن طريق تظليل الإطارات الأربع ثم الضغط على f6 فيصبح الخط الزمني كالتالي :-

2-**الآن نريد رسم شكل الزر اضغط في البداية على الإطار up ولاحظ أنك الآن سترسم شكل الزر عندما لا يكون مؤشر الفأرة فوقه ..كما ذكرنا في الأعلى .. انظر الشكل ...
بعد رسمك للشكل اضغط عليه ثم اختر أمر copy..3-**الآن اضغط على الإطار over ولا تنسى أن هذا الإطار يمثل شكل الزر عندما يضع المستخدم الماوس فوقه ولذلك عليك تمييز الزر وتغيير بعض ملامحه لتضيف نوعا من التفاعل ..فبعد ضغطك على الإطار over اضغط بالزر الأيمن في المسرح ثم اختر أمر paste in place.. سيتم لصق الزر (الدائرة). ولتغيير ملامح الزر .......ما رأيكم أن نغير في إضاءته ..
ولكن كيف ؟؟ أولا اضغط على أي مكان في المسرح ثم اضغط على الحرف f من لوحة المفاتيح ثم اضغط على الشكل لتظهر لك أداة تحريك الإضاءة وابدأ في تحريك مركز الإضاءة الموجود أمامك ..انظر الشكل (يمكنك تحريك الضوء كما تريد المهم عليك تمييز شكل الزر في هذه المرحلة )..


4- الآن انتقل الى الإطار الثالث وهو down و في المسرح اضغط بالزر الأيمن ثمّ اختر أمر paste in place بعد ذلك اضغط على الشكل (الزر) وحركه إلى الأسفل قليلا وصغّر حجمه ..5-بقي أخيرا الإطار hit وهنا أنت سوف تحدد المنطقة التي تعتبر ضمن .......الزر وهنا سوف نرسم شكل دائرة بنفس مقاسات الدوائر في الإطارات الأخرى .....وأفضل شيء في هذا الإطار هو لصق الدائرة الموجودة في إطار UP وو ضعها في هذا الإطار ... ..ولا تنسى أن الدائرة التي سوف تضعها في هذا الإطار لا تظهر في الفلم النهائي .

الآن انتهيت من تهيئة شكل الزر في جميع الأحوال ما عليك سوى الانتقال إلى scene1 والضغط عليها لتنقلك إلى الفيلم الرئيسي .......الآن أنت في النافذة الرئيسية افتح نافذة المكتبة واسحب الرمز منها وضعه على المسرح انظر الشكل .......
ولتجربة الزر اختر test move من control..وإليكم شكل الزر بعد عمله

ملاحظة:


الآن وبعد قدرتك على عمل button زر ..لعلك تسأل نفسك كيف يمكنني أن أبرمج هذا الزر لكي يتغاعل مع المشاهد أو كي يوصلني إلى شيء معين عند الضغط عليه ....الحل في ذلك هو لغة أكشن سكريبت action script ..لا تنزعج فلن تحتاج أن تكون مبرمج ذا خبرة في الكمبيوتر فقط ستضيف بعض اللمسات البسيطة ......

***ما هي لغة أكشن سكريبت action script ??
**هي لغة برمجة بسيطة وهي تتيح لك التحكم في الخطوط الزمنية والأصوات والألوان والرسومات وغيره ولغة البرمجة هذه تشبه إلى حد كبير اللغة الإنجليزية ..
طبعا أوامر اللغة كثيرة لكن سنشرح منها ما سوف نستخدمه ...وبإذن الله سوف تكون الأوامر التي نتعرف عليها تمكنك من معرفة غيرها في المستقبل ...
وهناك أمر آخر وهو كيفية الوصول إلى نافذة الأكشن سكريبت >>> وإليكم الطريقة ..
من قائمة window اختر actions أو عن طريق f9 ...
شاهد المثال التالي :-

*ولتتعرف على طريقة عمله خذ نفسا عميقا وسم بالله ثم اقرأ الخطوات التالية:-
**أولا انظر الشكل التالي :-
**ستلاحظ في الفيلم وجود 5 عناصر وهي :--
وهي 1- جملة enter your name ..
2- المستطيل الأبيض الذي يدخل فيه المستخدم اسمه ...
3- جملة hellow وبعدها يظهر اسم المستخدم ..
4- زر ok ..
5- عبارة thank you المتحركة ...
**نبدأ بشرحها واحدة واحدة :-
في البداية افتح ملف جديد في فلاش ثم غير لون الخلفية من الخاصية back ground من نافذة الخصائص واختر اللون الأسود ..**1-لعمل عبارة enter your name اختر أداة الكتابة من صندوق الأدوات .. ثم اذهب على لوحة الخصائص ونجعل نوع النص هو static text أي نص ثابت لا يتحرك بعدها حدد نوع ومقاس ولون الخط ثم اذهب على المسرح وارسم مربع النص واكتب الجملة بداخله .....انظر الشكل التالي ..

2-لعمل المستطيل الأبيض الذي يكتب فيه المستخدم اسمه ..اختار أداة الكتابة من صندوق الأدوات ثم اذهب على نافذة الخصائص واختر نوعه input text وذلك لأنه يعتبر مربع إدخال واضغط على الخيار show border around text وارسم المربع على المسرح انظر الشكل التالي --
بعد رسمك للمستطيل على المسرح اذهب على نافذة الخصائص وعند <instance name> اكتب اسم للمربع وليكن username <يجب التقيد بالاسم تماما لأنه يفيدنا في البرمجة> انظر الشكل ...
وعند الخيار character اضغط عليه واختر بعد ذلك الأمر all characters ..ثم done...انظر الشكل ....3- لعمل جملة hellow التي يأتي بعدها اسم المستخدم اختر أداة النص وارسم المستطيل على الشاشة ثم غير نوع النص من نافذة الخصائص واجعله dynamic text واجعل اسمه message كالتالي:
ضع في اعتبارك هذا الاسم لأنك سوف تستخدمه أثناء البرمجة...ولا تنسى تحديد لون ومقاس الخط بالشكل الذي يناسبك........ و لا تكتب في مربع النص الحالي على المسرح ولا حرف لأن عملية الكتابة ستتم برمجيا بعد كتابة المستخدم اسمه وضغطه على زر ok ... وتأكد من أن الخيار show border around text غير محدد في نافذة الخصائص ,,

بقي عمل زر ok , و عمل عبارة thank you المتحركة كلاهما سيكون عبارة عن رمز ......4-لنبدأ بعمل زر ok >ابدأ بعمل رمز جديد من بالطريقة المعروفة insert>>new symbol<<button وسمي الرمز كما تشاء مثلا ok button ثم ok ستنتقل الآن إلى نافذة جديدة خاصة بالرمز كما تعلمنا سابقا ظلل الإطارات الأربعة الموجودة أمامك ثم اضغط f6 >>>
اضغط على الإطار up ثم اختر أداة الدائرة وحدد اللون الذي تريد ثم ارسم الدائرة على المسرح ثم اختر أداة النص ويجب أن يكون نوع النص من نافذة الخصائص هو static text وارسم مربع نص فوق الدائرة واكتب ok .. الآن قم بتحديد كل من الدائرة والنص وذلك من القائمة edit اختر الأمر select all ثم من القائمة modify اختر الأمر group انظر الشكل >>

لقد قمنا بعمل ذلك لنتعامل معهما على أنهما كائن واحد ...اضغط عليه ثم انسخه بواسطة copy...
الآن اضغط على الإطار over واختر الأمر paste in place وحرك الشكل للأعلى قليلا
الآن اضغط على الإطار down واختر الأمر paste in place ولكن صغّر حجم الزر في هذا الإطار وأنزله الى أسفل قليلا....ثم اضغط على الإطار hit واختر الأمر paste in place ,, انتهيت الآن من عمل الزر اذهب الآن الى scene1 اضغط عليها سيعيدك إلى النافذة الرئيسية .......الآن افتح نافذة المكتبة واسحب الزر منها وضعه بالمكان المناسب ...

5-لعمل جملة thank you المتحركة ..اعمل رمز جديد من نوع move clip وسمّه أي اسم تريد بعد ضغطك على ok ستنتقل إلى نافذة الرمز اعمل ما يلي فيها :-- اضغط على أداة النص ثم حدد نوع النص من نافذة الخصائص ليكن نوعه static text وحدد الخط والمقياس واللون الذي تريد ثم اكتب العبارة thank you على المسرح كان هذا عند الإطار الأول ... انتقل إلى الإطار 30 اضغط عليه ثم اضغط f6 ثم ظلل جميع الإطارات وانقر بالزر الأيمن على التظليل واختر الأمر create motion tween ..ثم بعدها مباشرة اضغط بالمؤشر على الإطار 30 ثم انقر فوق العبارة ومن ثم انتقل إلى نافذة الخصائص لتغيير الخيار color كالتالي :--

الآن انتهيت من عمل عبارة thank you فقط اضغط على scene 1 للعودة للشاشة الرئيسية ...الآن افتح نافذة
المكتبة واسحب الرمز منها وضعه على المسرح ..
ولكن يجب بعد سحب الرمز ووضعه على المسرح لابد من تسميته في نافذة الخصائص وليكن thanks كالتالي:--بقيت الآن مرحلة البرمجة ::
افهم معي جيدا التالي :-- نحن نريد المستخدم يدخل اسمه في مستطيل سميناه username المستخدم بعدها سوف يضغط على ok >>>>ماذا نريد أن يحدث بعد ذلك ؟؟؟
نريد أن تظهر (جملة hellow+ اسم المستخدم) كما حدث معك عندما أدخلت اسمك &&
كيف سنعبر عنها؟؟ مبدئيا سنقول (hellow + username )حيث username هي اسم الخانة التي يدخل فيها المستخدم اسمه .... وبالتالي ستظهر hellow +الاسم الذي تم إدخاله
ولكن أين ستظهر جملة (اسم المستخدم+hellow ) ؟؟هل تذكر المستطيل الخالي الذي سميناه message الذي جعلنا رقمه 3 في أول شكل ..نعم هناك ستظهر الجملة ..
اذن نستطيع كتابة المعادلة البسيطة التالية (message=hellow + username) أي سوف تظهر فيك يا message عبارة hellow واسم المستخدم الذي تم إدخاله ..
ولكن كيف نعبر عن ذلك برمجيا ؟؟ طبّق ما يلي :--
في البداية اضغط على زر okالذي أمامك في المسرح ثم افتح نافذة action من قائمة window لتظهر لك كالتالي:--


يجب تحديد أمر export mode كما في الرسم السابق وذلك لتستطيع كتابة الكود:--
الآن اكتب الكود التالي:--




هل اتضحت الصورة ؟؟؟؟