تويت
[frame="2 98"]
بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
يتضمن فلاش عديد الكلاسات التي تحتوي على خصائص (properties) يمكن تعديلها والتحكم
فيها بواسطة أوامر أكشن سكريبت و أساليب (methods) تؤدي مهاما معينة عند استدعائها أو طلبها
وتستجيب هاته الكائنات للآوامر المطلوبة منها عن طريق مختلف الأحداث (Events)
الخصائص : Properties
هى كل المتغيرات التي تميز الكائن كالأحداثيات , اللون ودرجة الشفافية الدوران إلى آخره ولك الحرية في ادراج
القيم التي تراها مناسبة حسب مشروعك لأي كائن معين .. سنوضح في المثال التالي من خلال هذا الجدول لــ مقطع فلم =
موفي كليب باسم " box " بعض الخصائص ولاحظ أخي الكريم خصائص
الموفي كليب والقيم المدرجة
خصائص الموفي كليب box
في هذه الصورة تطبيق لبعض القيم box
يمكن طبعا أن نقوم بتخزين قيم هاته الخصائص أو تتبعها وتطبيقها على كائنات أخرى بسهولة.
[HTML]
trace(box.alpha);
var bAlpha:Number = box.alpha;
[/HTML]
الأحداث: Events
الأحداث هي كل ما يستطيع الكائن الإستجابة له . يستجيب الكائن إما للأحداث من قبل المستخدم، مثل
الضغط على مفتاح من لوحة المفاتيح أو النقر على زر الفأرة , أو أحداث داخل الفيلم , والتي تعتمد على
الخط الزمني أو عامل وقتي مثل المؤقتات Timer .
هناك ما يسمي بدالة انتظار حدث Event Listener وهي ببساطة دالة يتم إدراجها في قائمة انتظار
لتنُفذ عند وقوع حدث ما وتسمى أيضا بدالة التوجيه Handler لأنها ستوجه البرنامج لخطوات عمل
شيء معين عند وقوع هذا الحدث على سبيل المثال عند النقر على زر الفارة .
يوجد أيضا ما يُسمى بمستقبل الحدث Event Target وهو ببساطة عبارة عن اي كائن سوف يستقبل
الحدث . فمثلا ا عند النقر على رمز من الرموز مثل الموفي كليب , في هذه الحالة عملية النقر تمثل الحدث
والموفي كليب يمثل مستقبل الحدث . لكل مستقبل حدث قائمة انتظار خاصة به تستطيع ببساطة أن تدرج
ما تشاء من دوال انتظار في هذه القائمة . وتجدر الإشارة أن أهم كلاس في هذا الجزء هو كلاس
EventDispatcher المسؤول عن إعطاء الضوء الأخضر لتنفيذ جميع دوال الانتظار
دون إطالة في الكلام نمر الى شرح هذا الجزء بالأكواد :
أحداث الماوس
نفتح برنامج الفلاش ونضيف زر بالمسرح باسم rotate_right_btn ونضيف أيضا مربع نحوله الى
موفي كليب باسم box اضف طبقة ثانية للاكشن انسخ الكود والصقه وقم بالمعاينة .
* بالنسبة الى الزر ربطناه بحدث استماع .addEventListener من نوع أحداث الماوس وهو هنا
حدث النقر ثم واسم الوظيفة المطلوب تنفيذها وتتعلق بأمر دوران بمقدار 02 درجة للموفي وسميناها
onRotateRight
[HTML]
rotate_right_btn.addEventListener(MouseEvent.MOUSE _DOWN,onRotateRight);
function onRotateRight(evt:MouseEvent):void {
box.rotation += 20;
}
[/HTML]
شرح بطريقة أخرى
نقوم بتحديد اسم الكائن الذي سينفذ عملية معينة وهو هنا = الزر rotate_right_btn وأضفنا له حدث
استماع addEventListener() وتستقبل هاته الوسيلة معاملين الأول نوع الحدث المراد الاستماع اليه
والثاني الوظيفة التي يجب تنفيذها في صورة تحقق الحدث المطلوب والحدث هنا هو" النقر بالماوس "
فوق الكائن box وبالتالي يتم تنفيذ أمر دوران الموفي بالقيمة المطلوبة box.rotation += 20 ;
في المثال التالي سنتعرف أكثر على بعض أحداث الماوس وسنحاول استخلاص ما هو مفيد
افتح برنامج الفلاش ارسم مربع صغير وحوله الى موفي كليب باسم myMovieClip أضف طبقة ثانية
خاصة بالاكشن انسخ الكود والصقه قم بالمعاينة ستلاحظ أنك بواسطة الماوس تستطيع أن تسحب هذا
الكائن الى أي مكان من المسرح ولما تفلت الماوس يتحرر الكائن من الحدث الأول ولاحظ في الكود
وظيفتي بداية السحب وإيقاف السحب .
[HTML]
myMovieClip.addEventListener(MouseEvent.MOUSE_DOWN , onStartDrag);
myMovieClip.addEventListener(MouseEvent.MOUSE_UP, onStopDrag);
function onStartDrag(evt:MouseEvent):void {
evt.target.startDrag();
}
function onStopDrag(evt:MouseEvent):void {
evt.target.stopDrag();
}
[/HTML]
الان افتح المكتبة اسحب نسخة من الموفي كليب واعطه اسم myMovieClip2 حدد طبقة الأكشن
انسخ الان السطرين الأولين من الكود والصقهما تحتهما ليصبح الكود بالشكل النهائي:
[HTML]
myMovieClip.addEventListener(MouseEvent.MOUSE_DOWN , onStartDrag);
myMovieClip.addEventListener(MouseEvent.MOUSE_UP, onStopDrag);
myMovieClip2.addEventListener(MouseEvent.MOUSE_DOW N, onStartDrag);
myMovieClip2.addEventListener(MouseEvent.MOUSE_UP, onStopDrag);
function onStartDrag(evt:MouseEvent):void {
evt.target.startDrag();
}
function onStopDrag(evt:MouseEvent):void {
evt.target.stopDrag();
}
[/HTML]
لاحظ معي أخي الكريم أن الخاصية target في الكود عوضت myMovieClip وبالتالي فهي تمثل
أي كائن مستقبل لحدث الماوس وهنا نقر الماوس وافلات الماوس . وهذه الخاصية جميلة وهي بمثابة
اختصار لكتابة اكواد اكثر تخص الكائنات بالمسرح .وهي شبيهة بالدالة this بمعنى أنه اذا كررت
العملية يعني تسحب موفي ثالث وتعطه اسم myMovieClip3 وتنسخ وتلصق تفس السطرين مع
إضافة رقم 3 للموفي يتم تطبيق حدث الماوس السحب والافلات على الجميع ويمكن طبعا اتباع نفس
الطريقة مع أزرار أواي تطبيقات مشابهة .
ندرج مثال اخر
افتح برنامج الفلاش ارسم مربع حوله الى موفي كليب واعطه اسم box في نفس الطبقة ارسم مستطيل
بلون اخر وحوله الى زر واعطه اسم move_left_btn الان اسحب من المكتبه نسخة من الزر واعطه اسم
move_right_btn اسحب نسخة ثالثة من الزر واعطها اسم move_up_btn اسحب نسخة رابعة واعطها اسم
move_down_btn اضف طبقة خاصة بالاكشن الصق الكود التالي وفيها وقم بالمعاينة
[HTML]
function onMoveLeft(evt:MouseEvent):void {
box.x -= 20;
}
function onMoveRight(evt:MouseEvent):void {
box.x += 20;
}
function onMoveUp(evt:MouseEvent):void {
box.y -= 20;
}
function onMoveDown(evt:MouseEvent):void {
box.y += 20;
}
move_left_btn.addEventListener(MouseEvent.MOUSE_UP , onMoveLeft);
move_right_btn.addEventListener(MouseEvent.MOUSE_U P, onMoveRight);
move_up_btn.addEventListener(MouseEvent.MOUSE_UP, onMoveUp);
move_down_btn.addEventListener(MouseEvent.MOUSE_UP , onMoveDown);
[/HTML]
هل خطرت لك فكرة بسيطة من هذا المثال ؟؟؟ فكر معي نعم يمكن بهذا المثال البسيط أن تنجز لعبة بسيطة
يعني تنجز خلفية بها مسار في جميع الاتجاهات وتحتوي نقطة هدف وعند وصول الموفي كليب الى النقطة الهدف
يختفي الموفي وتبرز للمستخدم مثلا صوت رصيد تتواصل اللعبة وهكذا .المثال يطبق أيضا من خلال الضغط على
اسهم لوحة المفاتيح لكن الكود يختلف وهذا مثال على السريع وادرجت ارقام الأسهم الأربعة للوحة المفاتيح فقط
أحداث لوحة المفاتيح
طيب اخذف كل الاكواد السابقة اترك الموفي كليب فقط واضف نص ديناميكي واعطه اسم dt_txt ثم الصق الكود
التالي بطبقة الاكشن وعاين استعمل الأسهم الأربعة للوحة المفاتيح فقط .
[HTML]
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress);
function onKeyPress(e:KeyboardEvent):void {
if(e.keyCode == 37){ //37 السهم الايسر
box.x -= 20;
dt_txt.text = "يسار ";
}
if(e.keyCode == 39){ //39 السهم الايمن
box.x += 2
dt_txt.text = "يمين ";
}
if(e.keyCode == 38){ //38 السهم الأعلى
box.y -= 20;
dt_txt.text = "أعلى ";
}
if(e.keyCode == 40){ //40 السهم الأسفل
box.y += 20;
dt_txt.text = "أسفل ";
}
}
[/HTML]
الصورة التالية توضح أرقام أزرار لوحة المفاتيح
أحداث التايمر Timer
يعتبر كلاس التايمر Timer من أهم الكلاسات في اكشن سكريبت خصوصا أنه يمكن اعتماد وظائفه في
تطبيقات كثيرة لاسيما الألعاب والمسابقات الى غير ذلك ويصعب شرح كل جزئية في هذا الجانب لكن
يمكن أخي الكريم اذا فكرت مثلا في إضافة الجمل الشرطية الى التايمر وربط وقت معين بشرط معين
ستتضح لك أفكارعديدة في انشاء تطبيقات جميلة .
المهم في المثال التالي البسيط سنشرح طريقة استعمال التامير وربطه مثلا بتنفيذ أمر على أحد العناصر
من نوع موفي كليب .
افتح برنامج الفلاش في الطبقة الأولى اضف مربع أو نجمة وحوله الى موفي كليب واعطه اسم box
في نفس الطبقة ارسم مستطيل صغير حوله الى زر واعطه اسم start_btn افتح المكتبة اسحب نسخة
من هذا الزر الى المسرح بجانب الأول واعطه اسم stop_btn الان اضف طبقة ثانية خاصة بالاكشن
انسخ الكود والصقه وعاين الملف .
[HTML]
var myTimer:Timer = new Timer(1000);
myTimer.addEventListener(TimerEvent.TIMER, timel);
function timel(e:TimerEvent):void{
box.rotation+=20;
}
start_btn.addEventListener(MouseEvent.CLICK, onStart);
function onStart(e:MouseEvent):void{
myTimer.start();
}
stop_btn.addEventListener(MouseEvent.CLICK, onStop);
function onStop(e:MouseEvent):void{
myTimer.stop();
[/HTML]
نلاحظ أننا بواسطة كلاس التايمر ووظائفه نستطيع أن نقوم بعدة تطبيقات على العناصر
الأليات : Methods
ببساطة هي آليات مسؤؤولة على تنفيذ الأوامر وهي واليات ووظائف جاهزة مهمتها تنفيذ أمر مطلوب وأغلب كلاسات
الاكشن سكريبت تحتوي على عديد الأليات على سبيل المثال الدالة stop(); والدالة play(); الى غير ذلك من الأوامر
البرمجية الجاهزة .
أستودعكم الله
[/frame]
بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
يتضمن فلاش عديد الكلاسات التي تحتوي على خصائص (properties) يمكن تعديلها والتحكم
فيها بواسطة أوامر أكشن سكريبت و أساليب (methods) تؤدي مهاما معينة عند استدعائها أو طلبها
وتستجيب هاته الكائنات للآوامر المطلوبة منها عن طريق مختلف الأحداث (Events)
الخصائص : Properties
هى كل المتغيرات التي تميز الكائن كالأحداثيات , اللون ودرجة الشفافية الدوران إلى آخره ولك الحرية في ادراج
القيم التي تراها مناسبة حسب مشروعك لأي كائن معين .. سنوضح في المثال التالي من خلال هذا الجدول لــ مقطع فلم =
موفي كليب باسم " box " بعض الخصائص ولاحظ أخي الكريم خصائص
الموفي كليب والقيم المدرجة
خصائص الموفي كليب box
في هذه الصورة تطبيق لبعض القيم box
يمكن طبعا أن نقوم بتخزين قيم هاته الخصائص أو تتبعها وتطبيقها على كائنات أخرى بسهولة.
[HTML]
trace(box.alpha);
var bAlpha:Number = box.alpha;
[/HTML]
الأحداث: Events
الأحداث هي كل ما يستطيع الكائن الإستجابة له . يستجيب الكائن إما للأحداث من قبل المستخدم، مثل
الضغط على مفتاح من لوحة المفاتيح أو النقر على زر الفأرة , أو أحداث داخل الفيلم , والتي تعتمد على
الخط الزمني أو عامل وقتي مثل المؤقتات Timer .
هناك ما يسمي بدالة انتظار حدث Event Listener وهي ببساطة دالة يتم إدراجها في قائمة انتظار
لتنُفذ عند وقوع حدث ما وتسمى أيضا بدالة التوجيه Handler لأنها ستوجه البرنامج لخطوات عمل
شيء معين عند وقوع هذا الحدث على سبيل المثال عند النقر على زر الفارة .
يوجد أيضا ما يُسمى بمستقبل الحدث Event Target وهو ببساطة عبارة عن اي كائن سوف يستقبل
الحدث . فمثلا ا عند النقر على رمز من الرموز مثل الموفي كليب , في هذه الحالة عملية النقر تمثل الحدث
والموفي كليب يمثل مستقبل الحدث . لكل مستقبل حدث قائمة انتظار خاصة به تستطيع ببساطة أن تدرج
ما تشاء من دوال انتظار في هذه القائمة . وتجدر الإشارة أن أهم كلاس في هذا الجزء هو كلاس
EventDispatcher المسؤول عن إعطاء الضوء الأخضر لتنفيذ جميع دوال الانتظار
دون إطالة في الكلام نمر الى شرح هذا الجزء بالأكواد :
أحداث الماوس
نفتح برنامج الفلاش ونضيف زر بالمسرح باسم rotate_right_btn ونضيف أيضا مربع نحوله الى
موفي كليب باسم box اضف طبقة ثانية للاكشن انسخ الكود والصقه وقم بالمعاينة .
* بالنسبة الى الزر ربطناه بحدث استماع .addEventListener من نوع أحداث الماوس وهو هنا
حدث النقر ثم واسم الوظيفة المطلوب تنفيذها وتتعلق بأمر دوران بمقدار 02 درجة للموفي وسميناها
onRotateRight
[HTML]
rotate_right_btn.addEventListener(MouseEvent.MOUSE _DOWN,onRotateRight);
function onRotateRight(evt:MouseEvent):void {
box.rotation += 20;
}
[/HTML]
شرح بطريقة أخرى
نقوم بتحديد اسم الكائن الذي سينفذ عملية معينة وهو هنا = الزر rotate_right_btn وأضفنا له حدث
استماع addEventListener() وتستقبل هاته الوسيلة معاملين الأول نوع الحدث المراد الاستماع اليه
والثاني الوظيفة التي يجب تنفيذها في صورة تحقق الحدث المطلوب والحدث هنا هو" النقر بالماوس "
فوق الكائن box وبالتالي يتم تنفيذ أمر دوران الموفي بالقيمة المطلوبة box.rotation += 20 ;
في المثال التالي سنتعرف أكثر على بعض أحداث الماوس وسنحاول استخلاص ما هو مفيد
افتح برنامج الفلاش ارسم مربع صغير وحوله الى موفي كليب باسم myMovieClip أضف طبقة ثانية
خاصة بالاكشن انسخ الكود والصقه قم بالمعاينة ستلاحظ أنك بواسطة الماوس تستطيع أن تسحب هذا
الكائن الى أي مكان من المسرح ولما تفلت الماوس يتحرر الكائن من الحدث الأول ولاحظ في الكود
وظيفتي بداية السحب وإيقاف السحب .
[HTML]
myMovieClip.addEventListener(MouseEvent.MOUSE_DOWN , onStartDrag);
myMovieClip.addEventListener(MouseEvent.MOUSE_UP, onStopDrag);
function onStartDrag(evt:MouseEvent):void {
evt.target.startDrag();
}
function onStopDrag(evt:MouseEvent):void {
evt.target.stopDrag();
}
[/HTML]
الان افتح المكتبة اسحب نسخة من الموفي كليب واعطه اسم myMovieClip2 حدد طبقة الأكشن
انسخ الان السطرين الأولين من الكود والصقهما تحتهما ليصبح الكود بالشكل النهائي:
[HTML]
myMovieClip.addEventListener(MouseEvent.MOUSE_DOWN , onStartDrag);
myMovieClip.addEventListener(MouseEvent.MOUSE_UP, onStopDrag);
myMovieClip2.addEventListener(MouseEvent.MOUSE_DOW N, onStartDrag);
myMovieClip2.addEventListener(MouseEvent.MOUSE_UP, onStopDrag);
function onStartDrag(evt:MouseEvent):void {
evt.target.startDrag();
}
function onStopDrag(evt:MouseEvent):void {
evt.target.stopDrag();
}
[/HTML]
لاحظ معي أخي الكريم أن الخاصية target في الكود عوضت myMovieClip وبالتالي فهي تمثل
أي كائن مستقبل لحدث الماوس وهنا نقر الماوس وافلات الماوس . وهذه الخاصية جميلة وهي بمثابة
اختصار لكتابة اكواد اكثر تخص الكائنات بالمسرح .وهي شبيهة بالدالة this بمعنى أنه اذا كررت
العملية يعني تسحب موفي ثالث وتعطه اسم myMovieClip3 وتنسخ وتلصق تفس السطرين مع
إضافة رقم 3 للموفي يتم تطبيق حدث الماوس السحب والافلات على الجميع ويمكن طبعا اتباع نفس
الطريقة مع أزرار أواي تطبيقات مشابهة .
ندرج مثال اخر
افتح برنامج الفلاش ارسم مربع حوله الى موفي كليب واعطه اسم box في نفس الطبقة ارسم مستطيل
بلون اخر وحوله الى زر واعطه اسم move_left_btn الان اسحب من المكتبه نسخة من الزر واعطه اسم
move_right_btn اسحب نسخة ثالثة من الزر واعطها اسم move_up_btn اسحب نسخة رابعة واعطها اسم
move_down_btn اضف طبقة خاصة بالاكشن الصق الكود التالي وفيها وقم بالمعاينة
[HTML]
function onMoveLeft(evt:MouseEvent):void {
box.x -= 20;
}
function onMoveRight(evt:MouseEvent):void {
box.x += 20;
}
function onMoveUp(evt:MouseEvent):void {
box.y -= 20;
}
function onMoveDown(evt:MouseEvent):void {
box.y += 20;
}
move_left_btn.addEventListener(MouseEvent.MOUSE_UP , onMoveLeft);
move_right_btn.addEventListener(MouseEvent.MOUSE_U P, onMoveRight);
move_up_btn.addEventListener(MouseEvent.MOUSE_UP, onMoveUp);
move_down_btn.addEventListener(MouseEvent.MOUSE_UP , onMoveDown);
[/HTML]
هل خطرت لك فكرة بسيطة من هذا المثال ؟؟؟ فكر معي نعم يمكن بهذا المثال البسيط أن تنجز لعبة بسيطة
يعني تنجز خلفية بها مسار في جميع الاتجاهات وتحتوي نقطة هدف وعند وصول الموفي كليب الى النقطة الهدف
يختفي الموفي وتبرز للمستخدم مثلا صوت رصيد تتواصل اللعبة وهكذا .المثال يطبق أيضا من خلال الضغط على
اسهم لوحة المفاتيح لكن الكود يختلف وهذا مثال على السريع وادرجت ارقام الأسهم الأربعة للوحة المفاتيح فقط
أحداث لوحة المفاتيح
طيب اخذف كل الاكواد السابقة اترك الموفي كليب فقط واضف نص ديناميكي واعطه اسم dt_txt ثم الصق الكود
التالي بطبقة الاكشن وعاين استعمل الأسهم الأربعة للوحة المفاتيح فقط .
[HTML]
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress);
function onKeyPress(e:KeyboardEvent):void {
if(e.keyCode == 37){ //37 السهم الايسر
box.x -= 20;
dt_txt.text = "يسار ";
}
if(e.keyCode == 39){ //39 السهم الايمن
box.x += 2
dt_txt.text = "يمين ";
}
if(e.keyCode == 38){ //38 السهم الأعلى
box.y -= 20;
dt_txt.text = "أعلى ";
}
if(e.keyCode == 40){ //40 السهم الأسفل
box.y += 20;
dt_txt.text = "أسفل ";
}
}
[/HTML]
الصورة التالية توضح أرقام أزرار لوحة المفاتيح
أحداث التايمر Timer
يعتبر كلاس التايمر Timer من أهم الكلاسات في اكشن سكريبت خصوصا أنه يمكن اعتماد وظائفه في
تطبيقات كثيرة لاسيما الألعاب والمسابقات الى غير ذلك ويصعب شرح كل جزئية في هذا الجانب لكن
يمكن أخي الكريم اذا فكرت مثلا في إضافة الجمل الشرطية الى التايمر وربط وقت معين بشرط معين
ستتضح لك أفكارعديدة في انشاء تطبيقات جميلة .
المهم في المثال التالي البسيط سنشرح طريقة استعمال التامير وربطه مثلا بتنفيذ أمر على أحد العناصر
من نوع موفي كليب .
افتح برنامج الفلاش في الطبقة الأولى اضف مربع أو نجمة وحوله الى موفي كليب واعطه اسم box
في نفس الطبقة ارسم مستطيل صغير حوله الى زر واعطه اسم start_btn افتح المكتبة اسحب نسخة
من هذا الزر الى المسرح بجانب الأول واعطه اسم stop_btn الان اضف طبقة ثانية خاصة بالاكشن
انسخ الكود والصقه وعاين الملف .
[HTML]
var myTimer:Timer = new Timer(1000);
myTimer.addEventListener(TimerEvent.TIMER, timel);
function timel(e:TimerEvent):void{
box.rotation+=20;
}
start_btn.addEventListener(MouseEvent.CLICK, onStart);
function onStart(e:MouseEvent):void{
myTimer.start();
}
stop_btn.addEventListener(MouseEvent.CLICK, onStop);
function onStop(e:MouseEvent):void{
myTimer.stop();
[/HTML]
نلاحظ أننا بواسطة كلاس التايمر ووظائفه نستطيع أن نقوم بعدة تطبيقات على العناصر
الأليات : Methods
ببساطة هي آليات مسؤؤولة على تنفيذ الأوامر وهي واليات ووظائف جاهزة مهمتها تنفيذ أمر مطلوب وأغلب كلاسات
الاكشن سكريبت تحتوي على عديد الأليات على سبيل المثال الدالة stop(); والدالة play(); الى غير ذلك من الأوامر
البرمجية الجاهزة .
أستودعكم الله
وبارك الله فيك .
تعليق