خادم المسلمين
22-02-2015, 11:28 PM
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
الشرح لأستاذى الفاضل
Diamond mas
[[ تجهيز اللعبة ]]
تتكون لعبتنا من ثلاثة شاشات:
- شاشة بدء اللعبة ويظهر فيها زر "بدء اللعب" وخلفية مناسبة.
[spoiler=صورة عن شاشة بدء اللعبة]
http://www.mexat.com/vb/attachment.php?attachmentid=1871619&d=1370867573
- شاشة اللعب وتظهر فيها البطاقات بالإضافة إلى زر "إنهاء" لإنهاء اللعب وخلفية مناسبة.
[spoiler=صورة عن شاشة اللعب]
http://www.mexat.com/vb/attachment.php?attachmentid=1871618&d=1370867573
- شاشة النتائج وتظهر فيها نتائج اللاعب مع زر "بدء اللعب" من جديد وخلفية مناسبة.
[ صورة عن شاشة النتائج]
http://www.mexat.com/vb/attachment.php?attachmentid=1871620&d=1370867573
كل شاشة من تلك الشاشات عبارة عن إطار على شريط الزمن، ولدينا على شريط الزمن أيضاً ثلاث طبقات:
- طبقة لكتابة الكود لجعل العمل منظماً، ويمكن الاستغناء عن هذه الطبقة وكتابة الكود على أي طبقة أخرى (سنسميها: الكود).
- طبقة للأزرار والبطاقات والنتائج (سنسميها: العناصر).
- طبقة للخلفيات (سنسميها: الخلفيات).
.
.
.
بعد أن تعرفنا على هيكلية اللعبة دعونا نباشر بصناعتها:
- نفتح ملف فلاش جديد ثم نعدِّل قياسات مسرح العمل إلى 550 × 450 بكسل باستخدام لوحة الخصائص.
- نسمّي الطبقة الأولى بـ "الخلفيات" ثم نضيف إطارين رئيسيين جديدين لصبح لدينا ثلاثة إطارات رئيسية.
- نقوم باستيراد خلفية مناسبة ويمكنكم استخدام الخلفية (هنا (http://www.mexat.com/vb/attachment.php?attachmentid=1871325&d=1370778865)) ووضعها في الإطار الأول والثالث واستيراد الخلفية (هنا (http://www.mexat.com/vb/attachment.php?attachmentid=1871326&d=1370778865)) ووضعها في الإطار الثاني ثم إغلاق هذه الطبقة.
- نقوم باستيراد صور مناسبة لصنع أزرار، ويمكنكم استخدام الصور (هنا (http://www.mexat.com/vb/attachment.php?attachmentid=1871327&stc=1&d=1370778865)) و(هنا (http://www.mexat.com/vb/attachment.php?attachmentid=1871331&stc=1&d=1370778880)).
- نصنع زرين: {زر بدء اللعب وزر إنهاء اللعبة} لصناعة الزر نضغط على ctrl + f8 لتظهر نافذة صناعة رمز،
نكتب اسم الزر {ليكن اسم زر البدء start_game_btn واسم زر الإنهاء end_game_btn} ثم نختار button من خانة type،
نضغط موافق (ok) ثم من لوحة المفاتيح ثم نسحب صورة زر البدء من المكتبة ونفلتها في منتصف الزر وكذا نفعل مع زر الإنهاء.
- ننشئ طبقة جديدة ونسميها "العناصر" ونضيف إطارين رئيسيين إليها عند الإطار الثاني والثالث ليصبح لدينا ثلاثة إطارات رئيسية في تلك الطبقة أيضاً.
- بعد أن صنعنا زرين وأنشأنا طبقة "العناصر" نضع زر بدء اللعب على الإطار الأول والإطار الثالث من طبقة "العناصر" عن طريق سحبه من المكتبة وإفلاته على المسرح،
ثم نتوجه إلى لوحة الخصائص ونكتب الاسم start_game_btn في أعلى اللوحة بدلاً من <instance name>.. نفعل ذلك على الزر في الإطار الأول ونفعل ذات الشيء وبنفس الاسم مع الزر الإطار الثالث،
بعد ذلك نضع زر الإنهاء على الإطار الثاني من نفس الطبقة ونعطيه الإسم end_game_btn.
ملاحظات:
- فائدة تسمية الازرار تكمن في إضافة أكواد تحدد فعل كل زر من هذه الأزرار.
- يمكنكم إضافة اسم للعبة باستخدام أداة النص على طبقة "العناصر" في الإطار الأول.
- نستورد صور البطاقات إلى فلاش بحيث تكون أبعاد الصور 51 × 66 بكسل، سنحتاج إلى 6 صور ويمكنكم استخدام الصور التالية (هنا (http://www.mexat.com/vb/attachment.php?attachmentid=1871332&d=1370779204)).
- بعد استيراد صور البطاقات نتجه إلى المكتبة ونضغط بالزر الأيمن على الصورة الأولى منها ثم نختار خصائص (properties)،
ثم من actionscript نحدد export for actionscript ثم نكتب اسم الصورة img_1 في الخانة class ثم نضغط موافق (ok)،
ستظهر رسالة تخبرنا أن هذا الاسم جديد وأن فلاش سيقوم بتعريفه تلقائياً نضغط موافق (ok).
ونقوم بنفس الخطوات لتسمية كافة صور البطاقات بحيث تحمل الأسماء {img_1, img_2, img_3, img_4, img_5, img_6}.
- نستورد صورة ظهر البطاقة بحيث تكون أبعادها 51 × 66 بكسل أيضاً،
ويمكنكم استخدام الصورة التالية (هنا (http://www.mexat.com/vb/attachment.php?attachmentid=1871324&stc=1&d=1370778865)) ثم نذهب إلى المكتبة ونضغط على الصورة بالزر الأيمن ونختار خصائص (properties)،
ثم من actionscript نحدد export for actionscript ثم في خانة class نكتب اسم الغلاف card_cover.
- نعمل تضمين للخط الذي نود استخدامه من خلال الذهاب إلى القائمة text ثم اختيار font embedding ثم نختار نوع الخط الذي نريد استخدامه (ليكن arial)،
ثم من character ranges نختار numerals [0..9] (11/11 glyphs،
بعد ذلك نكت اسم الخط الذي في الخانة name وليكن my_font.
- نضيف عدادي النقاط والحركات على الإطار الثاني للعبة:
* باستخدام أداة النص نضيف مربع نص نكتب فيه 0 ثم نتجه إلى لوحة الخصائص ونتأكد من اختيار classic text و dynamic text،
ثم نكتب pointsscreen في خانة الاسم أعلى اللوحة ثم في خانة family نختار اسم الخط الذي قمنا بتضمينه (my_font).
* أيضاً باستخدام أداة النص نضيف مربع نص آخر نكتب فيه 0 ثم نتجه إلى لوحة الخصائص ونتأكد من اختيار classic text و dynamic text،
ثم نكتب movesscreen في خانة الاسم أعلى اللوحة.
- نضيف نتائج اللاعبين على الإطار الثالث للعبة:
* نضيف نص نكتب فيه "عدد الحركات" ثم نضيف بجانبه مربع نص نكتب فيه 0 ثم نتجه إلى لوحة الخصائص،
ونتأكد من اختيار classic text و dynamic text للنص الثاني ونكتب playermoves في خانة الاسم أعلى اللوحة.
* نضيف نص نكتب فيه "مجموع النقاط" ثم نضيف بجانبه مربع نص آخر نكتب فيه 0 ثم نتجه إلى لوحة الخصائص،
ونتأكد من اختيار classic text و dynamic text للنص الثاني ونكتب playerpoints في خانة الاسم أعلى اللوحة.
ملاحظة: يجب مراعاة حالة الحروف كبيرة وصغيرة (capital and small) عند تسمية النصوص والأزرار.
- نغلق طبقة "العناصر" وننشئ طبقة جديدة نسميها "الكود" ونضيف إطارين رئيسيين إليها عند الإطار الثاني والثالث ليصبح لدينا ثلاثة إطارات رئيسية في تلك الطبقة أيضاً.
- نختار الإطار الأول من طبقة "الكود" ثم نضغط f9 لإضافة الكود إليها ونكتب الكود التالي:
import flash.events.mouseevent;
this.start_game_btn.addeventlistener(mouseevent.cl ick, this.start_btn_event_handler);
stop();
- نختار الإطار الثاني من طبقة "الكود" ثم نتجه إلى لوحة الخصائص لإعطاءه اسما ونكتب start في الخانة name ثم نضغط enter بعد ذلك نضغط f9 ونكتب الكود التالي:
import flash.events.mouseevent;
this.start(1);
this.end_game_btn.addeventlistener(mouseevent.clic k, this.click_endlevel);
stop();
- نختار الإطار الثالث من طبقة "الكود" ثم نتجه إلى لوحة الخصائص لإعطاءه اسما ونكتب results في الخانة name ثم نضغط enter بعد ذلك نضغط f9 ونكتب الكود التالي:
import flash.events.mouseevent;
this.start_game_btn.addeventlistener(mouseevent.cl ick, this.start_btn_event_handler);
this.displayresult();
stop();
- نعطي اسماً للفئة الرئيسية للملف وذلك عن طريق الضغط على أي مكان فارغ في مسرح العمل ثم نذهب إلى لوحة الخصائص ثم نكتب simplegame في الخانة class مع مراعاة حالة الحروف.
- نحفظ الملف ثم نتجه إلى الموضوع التالي:
كود لعبة إيجاد البطاقات المتشابهة [ match & catch ] لمرحلة واحدة (http://www.mexat.com/vb/threads/1070305)
ثم نقوم بفك ضغط الملفين في المشاركتين الثانية والثالثة من ذاك الموضوع إلى نفس المكان الذي حفظنا به ملف الفلاش.
- نضغط ctrl + enter لتصدير اللعبة والاستمتاع باللعب :d
.
.
.
فيديو توضيحي للخطوات السابقة
https://www.youtube.com/watch?v=Xr4V7VqiDgE&feature=autoshare
السلام عليكم ورحمة الله وبركاته
الشرح لأستاذى الفاضل
Diamond mas
[[ تجهيز اللعبة ]]
تتكون لعبتنا من ثلاثة شاشات:
- شاشة بدء اللعبة ويظهر فيها زر "بدء اللعب" وخلفية مناسبة.
[spoiler=صورة عن شاشة بدء اللعبة]
http://www.mexat.com/vb/attachment.php?attachmentid=1871619&d=1370867573
- شاشة اللعب وتظهر فيها البطاقات بالإضافة إلى زر "إنهاء" لإنهاء اللعب وخلفية مناسبة.
[spoiler=صورة عن شاشة اللعب]
http://www.mexat.com/vb/attachment.php?attachmentid=1871618&d=1370867573
- شاشة النتائج وتظهر فيها نتائج اللاعب مع زر "بدء اللعب" من جديد وخلفية مناسبة.
[ صورة عن شاشة النتائج]
http://www.mexat.com/vb/attachment.php?attachmentid=1871620&d=1370867573
كل شاشة من تلك الشاشات عبارة عن إطار على شريط الزمن، ولدينا على شريط الزمن أيضاً ثلاث طبقات:
- طبقة لكتابة الكود لجعل العمل منظماً، ويمكن الاستغناء عن هذه الطبقة وكتابة الكود على أي طبقة أخرى (سنسميها: الكود).
- طبقة للأزرار والبطاقات والنتائج (سنسميها: العناصر).
- طبقة للخلفيات (سنسميها: الخلفيات).
.
.
.
بعد أن تعرفنا على هيكلية اللعبة دعونا نباشر بصناعتها:
- نفتح ملف فلاش جديد ثم نعدِّل قياسات مسرح العمل إلى 550 × 450 بكسل باستخدام لوحة الخصائص.
- نسمّي الطبقة الأولى بـ "الخلفيات" ثم نضيف إطارين رئيسيين جديدين لصبح لدينا ثلاثة إطارات رئيسية.
- نقوم باستيراد خلفية مناسبة ويمكنكم استخدام الخلفية (هنا (http://www.mexat.com/vb/attachment.php?attachmentid=1871325&d=1370778865)) ووضعها في الإطار الأول والثالث واستيراد الخلفية (هنا (http://www.mexat.com/vb/attachment.php?attachmentid=1871326&d=1370778865)) ووضعها في الإطار الثاني ثم إغلاق هذه الطبقة.
- نقوم باستيراد صور مناسبة لصنع أزرار، ويمكنكم استخدام الصور (هنا (http://www.mexat.com/vb/attachment.php?attachmentid=1871327&stc=1&d=1370778865)) و(هنا (http://www.mexat.com/vb/attachment.php?attachmentid=1871331&stc=1&d=1370778880)).
- نصنع زرين: {زر بدء اللعب وزر إنهاء اللعبة} لصناعة الزر نضغط على ctrl + f8 لتظهر نافذة صناعة رمز،
نكتب اسم الزر {ليكن اسم زر البدء start_game_btn واسم زر الإنهاء end_game_btn} ثم نختار button من خانة type،
نضغط موافق (ok) ثم من لوحة المفاتيح ثم نسحب صورة زر البدء من المكتبة ونفلتها في منتصف الزر وكذا نفعل مع زر الإنهاء.
- ننشئ طبقة جديدة ونسميها "العناصر" ونضيف إطارين رئيسيين إليها عند الإطار الثاني والثالث ليصبح لدينا ثلاثة إطارات رئيسية في تلك الطبقة أيضاً.
- بعد أن صنعنا زرين وأنشأنا طبقة "العناصر" نضع زر بدء اللعب على الإطار الأول والإطار الثالث من طبقة "العناصر" عن طريق سحبه من المكتبة وإفلاته على المسرح،
ثم نتوجه إلى لوحة الخصائص ونكتب الاسم start_game_btn في أعلى اللوحة بدلاً من <instance name>.. نفعل ذلك على الزر في الإطار الأول ونفعل ذات الشيء وبنفس الاسم مع الزر الإطار الثالث،
بعد ذلك نضع زر الإنهاء على الإطار الثاني من نفس الطبقة ونعطيه الإسم end_game_btn.
ملاحظات:
- فائدة تسمية الازرار تكمن في إضافة أكواد تحدد فعل كل زر من هذه الأزرار.
- يمكنكم إضافة اسم للعبة باستخدام أداة النص على طبقة "العناصر" في الإطار الأول.
- نستورد صور البطاقات إلى فلاش بحيث تكون أبعاد الصور 51 × 66 بكسل، سنحتاج إلى 6 صور ويمكنكم استخدام الصور التالية (هنا (http://www.mexat.com/vb/attachment.php?attachmentid=1871332&d=1370779204)).
- بعد استيراد صور البطاقات نتجه إلى المكتبة ونضغط بالزر الأيمن على الصورة الأولى منها ثم نختار خصائص (properties)،
ثم من actionscript نحدد export for actionscript ثم نكتب اسم الصورة img_1 في الخانة class ثم نضغط موافق (ok)،
ستظهر رسالة تخبرنا أن هذا الاسم جديد وأن فلاش سيقوم بتعريفه تلقائياً نضغط موافق (ok).
ونقوم بنفس الخطوات لتسمية كافة صور البطاقات بحيث تحمل الأسماء {img_1, img_2, img_3, img_4, img_5, img_6}.
- نستورد صورة ظهر البطاقة بحيث تكون أبعادها 51 × 66 بكسل أيضاً،
ويمكنكم استخدام الصورة التالية (هنا (http://www.mexat.com/vb/attachment.php?attachmentid=1871324&stc=1&d=1370778865)) ثم نذهب إلى المكتبة ونضغط على الصورة بالزر الأيمن ونختار خصائص (properties)،
ثم من actionscript نحدد export for actionscript ثم في خانة class نكتب اسم الغلاف card_cover.
- نعمل تضمين للخط الذي نود استخدامه من خلال الذهاب إلى القائمة text ثم اختيار font embedding ثم نختار نوع الخط الذي نريد استخدامه (ليكن arial)،
ثم من character ranges نختار numerals [0..9] (11/11 glyphs،
بعد ذلك نكت اسم الخط الذي في الخانة name وليكن my_font.
- نضيف عدادي النقاط والحركات على الإطار الثاني للعبة:
* باستخدام أداة النص نضيف مربع نص نكتب فيه 0 ثم نتجه إلى لوحة الخصائص ونتأكد من اختيار classic text و dynamic text،
ثم نكتب pointsscreen في خانة الاسم أعلى اللوحة ثم في خانة family نختار اسم الخط الذي قمنا بتضمينه (my_font).
* أيضاً باستخدام أداة النص نضيف مربع نص آخر نكتب فيه 0 ثم نتجه إلى لوحة الخصائص ونتأكد من اختيار classic text و dynamic text،
ثم نكتب movesscreen في خانة الاسم أعلى اللوحة.
- نضيف نتائج اللاعبين على الإطار الثالث للعبة:
* نضيف نص نكتب فيه "عدد الحركات" ثم نضيف بجانبه مربع نص نكتب فيه 0 ثم نتجه إلى لوحة الخصائص،
ونتأكد من اختيار classic text و dynamic text للنص الثاني ونكتب playermoves في خانة الاسم أعلى اللوحة.
* نضيف نص نكتب فيه "مجموع النقاط" ثم نضيف بجانبه مربع نص آخر نكتب فيه 0 ثم نتجه إلى لوحة الخصائص،
ونتأكد من اختيار classic text و dynamic text للنص الثاني ونكتب playerpoints في خانة الاسم أعلى اللوحة.
ملاحظة: يجب مراعاة حالة الحروف كبيرة وصغيرة (capital and small) عند تسمية النصوص والأزرار.
- نغلق طبقة "العناصر" وننشئ طبقة جديدة نسميها "الكود" ونضيف إطارين رئيسيين إليها عند الإطار الثاني والثالث ليصبح لدينا ثلاثة إطارات رئيسية في تلك الطبقة أيضاً.
- نختار الإطار الأول من طبقة "الكود" ثم نضغط f9 لإضافة الكود إليها ونكتب الكود التالي:
import flash.events.mouseevent;
this.start_game_btn.addeventlistener(mouseevent.cl ick, this.start_btn_event_handler);
stop();
- نختار الإطار الثاني من طبقة "الكود" ثم نتجه إلى لوحة الخصائص لإعطاءه اسما ونكتب start في الخانة name ثم نضغط enter بعد ذلك نضغط f9 ونكتب الكود التالي:
import flash.events.mouseevent;
this.start(1);
this.end_game_btn.addeventlistener(mouseevent.clic k, this.click_endlevel);
stop();
- نختار الإطار الثالث من طبقة "الكود" ثم نتجه إلى لوحة الخصائص لإعطاءه اسما ونكتب results في الخانة name ثم نضغط enter بعد ذلك نضغط f9 ونكتب الكود التالي:
import flash.events.mouseevent;
this.start_game_btn.addeventlistener(mouseevent.cl ick, this.start_btn_event_handler);
this.displayresult();
stop();
- نعطي اسماً للفئة الرئيسية للملف وذلك عن طريق الضغط على أي مكان فارغ في مسرح العمل ثم نذهب إلى لوحة الخصائص ثم نكتب simplegame في الخانة class مع مراعاة حالة الحروف.
- نحفظ الملف ثم نتجه إلى الموضوع التالي:
كود لعبة إيجاد البطاقات المتشابهة [ match & catch ] لمرحلة واحدة (http://www.mexat.com/vb/threads/1070305)
ثم نقوم بفك ضغط الملفين في المشاركتين الثانية والثالثة من ذاك الموضوع إلى نفس المكان الذي حفظنا به ملف الفلاش.
- نضغط ctrl + enter لتصدير اللعبة والاستمتاع باللعب :d
.
.
.
فيديو توضيحي للخطوات السابقة
https://www.youtube.com/watch?v=Xr4V7VqiDgE&feature=autoshare