رابعا: عمل قائمة منسدلة .
بعد أن قمنا بعمل قائمة من أزرار فقط ,نعمل الآن – إن شاء الله – قائمة منسدلة ,تتكون هذه القائمة من خمسة أزرار أساسية بدلا من زر واحد كما هو العادة ,والضغط علي أي زر يقوم بإسدال القائمة الخاصة به ... ,تعالوا نتعرف الآن علي الخطوات :
1. نفتح الآن مشروع فلاش جديد .
2. من قائمة Insert نختار New Symbol ,أو اضغط علي مفتاح Ctrl + F8 .
3. نغير الاسم إلي panel ,ونختار Movie Clip ,ثم نضغط OK .
4. نغير اسم اللاير الأول إلي top&buttom ,ونرسم في الفريم الأول الشكل التالي:
5. ندخل لاير جديد نسميه button1 ونرسم فيه زر ,ليكون الشكل كالتالي:
6. نحدد الزر (المحاط بإطار أصفر) ,ونحدد الإطار ثم نضغط زر F8 أو نختارConvert to Symbol من قائمة Insert , ثم نحدد الاسم button1 , ونحدد النوع Button ,ثم نضغط OK .
7. ندخل لاير جديد نسميه con1 ,ونرسم فيه زر نسميه con1 ,ليكون الشكل مثل التالي:
8. نسحب عدة نسخ من الزر في نفس اللاير أسفل الزر السابق :
9. ندخل أربعة لاير نسميها بالترتيب من أسفل إلي أعلي:
button2 , con2 ,button3 ,con3 .
10. نكرر الخطوات 5 و 6 و 7 و 8 .
والآن لابد أن يكون الشكل كالتالي:
11. ندخل لاير جديد نسميه labels ,ونحدد أول فريم منه ونضغط F7 سبع مرات .
12. نحدد الفريم الأول ,ومن نافذة properties قسم frame label نغير اسم الفريم إلي closeall .
13. نكرر الخطوة السابقة مع باقي الفريمات ونسميها كالآتي:
الفريم الثاني : open1
الفريم الثالث : open2
الفريم الرابع : open3
الفريم الخامس : 1&2
الفريم السادس : 1&3
الفريم السابع :2&3
الفريم الثامن:openall
14. نحدد أول فريم من لايرtop&buttom ونضغط مفتاح F6 حتى نملأ الفريمات من 1 إلي 8 ,ونفعل نفس الشيء مع لاير bitton1 و button2 و button3 .
15. نحدد لايرcon1 وننسخ فقط الفريمات التالية :
2 و 5 و6 و 8 .
16. في لاير con2 نملأ فقط الفريمات التالية :
3 و 5 و7 و8 .
17. نحدد لاير con3 وننسخ فقط الفريمات التالية :
4 و 6 و 7 و 8 .
و هذا هو الشكل الذي يجب أن تكون عليه الفريمات:
18. ننشئ لاير جديد نسميه actions ونضع في أول فريم منه أكشن stop(); .
19.والآن انتهينا من جميع اللايرات وبقي أن نحدد شكل الأزرار في كل فريم ,وسنستخدم الفريمات التي كنا قمنا بتسميتها من قبل, وهو سيكون كالتالي:
أولا : فريم opan1 :
وفيه تكون القائمة المنسدلة الخاصة بالزر الأول هي الظاهرة فقط ونلاحظ أن في ذلك الفريم يكون الفريم الأول من لاير con1 ,هو الوحيد من الثلاث فريمات الخاصة بالقوائم المنسدلة (con1 ,con2 ,con3) الذي به نقطة سوداء كما بالشكل:
فنحدد الفريم الثاني(open 1) ثم نعدل من وضع الأزرار والقوائم الفرعية حتى تكون مثل الشكل التالي:
20. نحدد الفريم الثالث (open2) ونكرر نفس الخطوات السابقة ,ولكن تكون القائمة con2 هي المفتوحة هذه المرة ,كما بالشكل:
21. نحدد الفريم الرابع (open3) ,ونكرر نفس الخطوات ولكن تكون القائمة con3 هي المفتوحة :
22. نحدد الفريم الخامس(1&2) ,ونكرر نفس الخطوات ,ولكن تكون فيه القائمتان con1 و con2 منسدلتان ,وهكذا نكرر الخطوات السابقة حتى نصل إلي آخر فريم وتكون فيه كل القوائم الفرعية منسدلة .
·والآن انتهينا من التصميم و الترتيب وبقي آخر شيء في القائمة وهو وضع الأكواد ,تعالوا نتخيل معا ما هي الأكواد التي يتم وضعها في الأزرار المختلفة علما بأن كل زر يحتوي علي كود مختلف في كل فريم ,أي أن كل زر سنخصص له 8 أكواد مختلفة بعدد الفريمات الثمانية ,والآن سنتخيل معا الأكواد الخاصة بالزر الأول:
·في الفريم الأول تكون القائمة كلها مسدلة ,لذلك فمن الطبيعي أن يؤدي الضغط علي الزر الأول إلي فتح القائمة الخاصة به ,والفريم الذي تكون فيه القائمة الخاصة بالزر الأول مفتوحة هو الفريم الذي يسمي open1 ولذلك من الضروري أن يكون الكود كالتالي:
on(release){
gotoAndStop("open1");
}
·أما في الفريم الثاني تكون القائمة المنسدلة الخاصة بالزر الأول مفتوحة فمن الطبيعي أن يؤدي الضغط علي هذا الزر في الفريم الأول إلي غلق القائمة المنسدلة الخاصة به ,ولذلك يكون الكود كالتالي:
on(release){
gotoAndStop("closeall");
}
·وفي الفريم الثالث تكون القائمة المنسدلة الخاصة بالزر الثاني مفتوحة ولذلك يجب أن يؤدي الضغط علي الزر الأول في هذا الفريم إلي فتح القائمة الخاصة بالزر الأول con1 إلي جانب القائمة الخاصة بالزر الثاني con2 ,ولذلك يكون الكود كالتالي:
on(release){
gotoAndStop("1&2");
}
·وفي الفريم الرابع (open3) تكون القائمة الخاصة بالزر الثالث مفتوحة ,لذلك يؤدي الضغط علي الزر الأول إلي فتح القائمة الخاصة به إلي جانب القائمة الخاصة بالزر الثالث ,ويكون الكود كالتالي:
on(release){
gotoAndStop("1&3");
}
·وفي الفريم الخامس تكون قائمة الزر الأول مفتوحة إلي جانب قائمة الزر الثاني ,ولذلك يؤدي الضغط علي الزر الأول إلي إغلاق قائمته وترك قائمة الزر الثاني فقط مفتوحة ,ويكون الكود كالتالي:
on(release){
gotoAndStop("open2");
}
·وفي الفريم السادس تكون قائمة الزر الأول مفتوحة إلي جانب قائمة الزر الثالث ,ويؤدي الضغط علي الزر الأول إلي غلق قائمته وترك قائمة الزر الثالث فقط مفتوحة ,والكود هو:
on(release){
gotoAndStop("open3");
}
·أما في الفريم السابع تكون قائمة الزر الثاني مفتوحة إلي جانب قائمة الزر الثالث ,بينما تكون قائمة الزر الأول مغلقة ,ولذلك يؤدي الضغط علي الزر الأول إلي فتح قائمته إلي جانب قائمة الزر الثاني والثالث ,فيكون الكود كالتالي:
on(release){
gotoAndStop("openall"){
}
·وفي الفريم الثامن تكون جميع القوائم مفتوحة ,فيؤدي الضغط علي الزر الأول إلي إغلاق قائمته وترك القائمتين الأخرتين ,ويكون الكود كالتالي:
on(release){
gotoAndStop("1&2");
}
·وعلي هذا النظام نكتب الأكواد الخاصة بالزرين الثاني والثالث في كل فريم , و .........يكفي هذا الآن لأنكم – بكل تأكيد – انصرفتم عن قراءة هذا الدرس الثقيل ,إلي أي لعبة ,أو حتى أغلقتم الحاسب ,وعموما الدرس القادم (عمل قائمة منسدلة بزر واحد أساسي) أسهل بكثييير من هذا الدرس ولا يحتاج إلي نصف المجهود المبذول هنا و لا تنسوا مراجعة الملفات المفتوحة فهي مهمة جدااااا .
·آه نسيت آخر جزء وهو عمل الجزء السفلي في القائمة ,ويمكن أن نحوله إلي زر يقوم بإغلاق جميع القوائم ,ويكون الكود الخاص به:
on(release){
gotoAndStop("closeall");
}
ونحول أيضا الجزء العلوي إلي زر لفتح جميع أزرار القائمة ويكون الكود الخاص به :
on(release){
gotoAndStop("openall");
}
و ........ يكفي هذا الكم اليسير جدا اليوم .