المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : الأحداث Events


خادم المسلمين
30-05-2014, 02:23 PM
بسم الله الرحمن الرحيم


السلام عليكم ورحمة الله وبركاته




عندما نتحدث عن الأحداث في الأكشن سكريبت 3 فإننا نتحدث عن شيء أساسي وهو Listener. في الاصدارات السابقة للاكشن سكريبت كنا نقوم بإضافة الحدث مباشرة للكائن على السبيل المثال عند الضغط على الزر تعرض عبارة في نافذة Output فإننا نقوم بذلك بالشكل التالي :
bClick.onRelease = function():Void {
trace("Button is Clicked");
};
فنبدأ أولا باسم الكائن وهو الزر باسم bClick ثم نستخدم اسلوب dot syntax وهي ببساطة نضع نقطة ونكتب الاحدث Event او الخاصية Property او السلوك Method المطلوب وهنا نريد الحدث onRelease ثم بعد ذلك نقوم بتعريف inline function وهي دالة عادية لكن ليس لها اسم وبداخل هذه الداله الاوامر التي تنفذ في حالة الضغط على الزر .الآن في الاصدار الجديد الاكشن سكريبت 3 اختلف الأمر واصبح اكثر سهوله ومتعه يكفي ان طريقة او شكل كتابة الأوامر Syntax ثابته وهو اننا نقوم بالاستماع للحدث بدلاً من اسنادة مباشرة للكائن فالمثال السابق يكتب بالاكشن سكريبت 3 بالشكل التالي :
bClick.addEventListener(MouseEvent.CLICK, btnClicked);
function btnClicked(evt:MouseEvent):void {
trace("Button is Clicked");
}
ما حدث هنا اننا قمنا بكتابة اسم الكائن وهو bClick ثم نقطة وقمنا بإضافة الأمر addEventLestener والذي يقوم بالاستماع للأحداث التي تصدر من هذا الكائن وهو الزر bClick ثم نفتح القوس وهذا الامر يمرر له معاملين الأول هو الحدث الذي سوف نستمع إليه فإذا صَدَرَ من الكائن فإنه سوف ينتفذ اوامر معينه أما المعامل الثاني يعرف باسم Event Handler وهو ببساطة اسم الدالة التي سوف يتم تنفيذها عن حدوث هذا الحدث واسم الدالة هنا btnClicked عند تعريف هذه الداله يجب أن تمرر لها معامل نوعه من نفس نوع الحدث MouseEvent وهذا ما قمنا به والسبب في ذلك أن الأمر addEventListener يقوم بإعادة أو توليد كائن event Object وهو يحتوي على معلومات عن الحدث او على أقل تقدير تحتوي على معلومات عن الكائن ( الزر bClicked ) الذي قام بتوليد هذا الحدث.
في الحقيقة هناك نوعين رئيسيين من الأحداث اولها هي الأحداث المرتبطة بالمستخدم user-based event وهي الأحداث التي تنفذ بناءاً على طلب المستخدم مثل الأحداث المرتبطة بالفأرة أو الكيبورد اما النوع الثاني هي الأحداث التي تنفذ دون تدخل المستخدم time-based event وهي الأحداث التي يتم إضافتها في إطار معين فعندما ينتقل رأس التسجيل PlayHead لهذا الإطار فإن هذا الحدث سوف ينفذ مباشرة مثل Timer & EnterFrame.
التعرف على الصنف MouseEvent Class :
الصنف MouseEvent Class يحتوي على العديد من الأحداث المرتبطة بالفأرة. نبدأ بمثال وبعد ذلك نشرح كل حدث على حده. المثال كالتالي :
// import Sprite & MouseEvent Class
import flash.display.Sprite;
import flash.events.MouseEvent;


// create Rectangel object in the stage
var listener:Sprite = new Sprite();
listener.graphics.beginFill(0xCC9900, 1);
listener.graphics.drawRect(30, 30, 100, 50);
listener.graphics.endFill();
listener.doubleClickEnabled = true;
addChild(listener);

// add event listener to object
listener.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
//listener.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
listener.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
listener.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
listener.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler);
listener.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
listener.addEventListener(MouseEvent.DOUBLE_CLICK, doubleClickHandler);

// functions be called execute when the event is received to change Rectangle fill color
function mouseDownHandler(mouseEvent:MouseEvent):void {
//Color black
listener.graphics.beginFill(0x000000, 1);
listener.graphics.drawRect(30, 30, 100, 50);
listener.graphics.endFill();
}
function mouseMoveHandler(mouseEvent:MouseEvent):void {
// Color red
listener.graphics.beginFill(0xff0000, 1);
listener.graphics.drawRect(30, 30, 100, 50);
listener.graphics.endFill();
}
function mouseOutHandler(mouseEvent:MouseEvent):void {
// Color green
listener.graphics.beginFill(0x00ff00, 1);
listener.graphics.drawRect(30, 30, 100, 50);
listener.graphics.endFill();
}
function mouseUpHandler(mouseEvent:MouseEvent):void {
// Color yellow
listener.graphics.beginFill(0xffff00, 1);
listener.graphics.drawRect(30, 30, 100, 50);
listener.graphics.endFill();
}
function mouseWheelHandler(mouseEvent:MouseEvent):void {
// Color pink
listener.graphics.beginFill(0xff00ff, 1);
listener.graphics.drawRect(30, 30, 100, 50);
listener.graphics.endFill();
}
function mouseOverHandler(mouseEvent:MouseEvent):void {
// Color blue
listener.graphics.beginFill(0x0000ff, 1);
listener.graphics.drawRect(30, 30, 100, 50);
listener.graphics.endFill();
}
function doubleClickHandler(mouseEvent:MouseEvent):void {
// Color brown
listener.graphics.beginFill(0x800000, 1);
listener.graphics.drawRect(30, 30, 100, 50);
listener.graphics.endFill();
}
- الحدث MouseEvent.CLICK:
يتم تنفيذ هذا الحدث عندما يقوم المستخدم بالضغط على الزر تحديداً عندما يقوم المستخدم بإفلات زر الفأرة الايسر.
- الحدث MouseEvent.DOUBLE_CLICK:
يتم تنفيذ هذا الحدث عندما يقوم المستخدم بالضغط ضغطاً مزدوجاً على الزر.
- الحدث MouseEvent.MOUSE_DOWN:
يتم تنفيذ هذا الحدث عندما يقوم المستخدم بالضغط على الزر وقبل إفلات زر الفأرة الايسر.
- الحدث MouseEvent.MOUSE_UP:
يتم تنفيذ هذا الحدث عندما يقوم المستخدم بالضغط على الزر تحديداً عندما يقوم المستخدم بإفلات زر الفأرة الايسر. وهو مشابه للحدث MouseEvent.CLICK.
- الحدث MouseEvent.MOUSE_MOVE:
يتم تنفيذ هذا الحدث عندما يتحرك مؤشر الفأرة في أي مكان فوق الزر.
- الحدث MouseEvent.MOUSE_OVER:
يتم تنفيذ هذا الحدث عندما يكون مؤشر الفأرة فوق الزر. وهو مشابه للحدث MouseEvent.MOUSE_MOVE.
- الحدث MouseEvent.MOUSE_OUT:
يتم تنفيذ هذا الحدث عندما يكون مؤشر الفأرة فوق الزر ثم ينتقل إلى خارج الزر وليس فوقة.
- الحدث MouseEvent.MOUSE_WHEEL:
يتم تنفيذ هذا الحدث عندما يكون مؤشر الفأرة فوق الزر وتحريك عجلة wheel الفأرة.
- الحدث MouseEvent.ROLL_OUT:
مشابه للحدث MouseEvent.MOUSE_OUT.
- الحدث MouseEvent.ROLL_OVER:
يتم تنفيذ هذا الحدث عندما يكون مؤشر الفأرة فوق الزر. وهو مشابه للحدث MouseEvent.MOUSE_OVER.

التعرف على الصنف KeyboardEvent:
هذا الصنف يحتوي على الاحداث المرتبطة في لوحة المفاتيح Keyboard. هذا النوع من الاحداث يختلف عن السابق في انه يجب أن يكون الكائن مفعل أي تم تحديده لكي يقوم الكائن بتوليد الاحدث ولذلك في الغالب فإن هذا النوع من الأحداث يضاف إلى الكائن stage objects او باختصار يضاف لمنطقة العمل لأنها تكون مفعله تلقائياً مع بداية تشغيل البرنامج مباشرة. لنبدأ بالمثال اولا وهو كالتالي :
// import Sprite & KeyboardEvent Class
import flash.display.Sprite;
import flash.events.KeyboardEvent;


// create Rectangel object in the stage
var listener:Sprite = new Sprite();
listener.graphics.beginFill(0xCC9900, 1);
listener.graphics.drawRect(30, 30, 100, 50);
listener.graphics.endFill();
addChild(listener);

// add event listener to the object
stage.addEventListener(KeyboardEvent.KEY_DOWN, moveRect);

// functions be called execute when the event is received to move the Rectangle
function moveRect(evt:KeyboardEvent):void {
switch (evt.keyCode) {
case 37 :
listener.x -= 5;
break;
case 38 :
listener.y -= 5;
break;
case 39 :
listener.x += 5;
break;
case 40 :
listener.y += 5;
break;
}
}
ما قمنا به اولا هو رسم مستطيل بعد ذلك قمنا بإضافة الحدث Key_DOWN للكائن stage فعند توليد الحدث نقوم باستدعاء الدالة moveRect وهي ببساطة تقوم بتحريك المستطيل اما للاعلى او الاسفل او يمين او يسار.
- الحدث KEY_DOWN:
يتم توليد هذا الحدث عند الضغط على احد مفاتيح الكيبورد وقبل افلات او ترك المفتاح.
- الحدث KEY_UP:
يتم توليد هذا الحدث عند إفلات او ترك احد مفاتيح الكيبورد.
- الخاصية ctrlKey:
تقوم بإعادة return القيمة true إذا قام المستخدم بالضغط على مفتاح Ctrl والقيمة false إلى لم يتم الضغط على نفس المفتاح.
- الخاصية shiftKey:
تقوم بإعادة return القيمة true إذا قام المستخدم بالضغط على مفتاح Shift والقيمة false إلى لم يتم الضغط على نفس المفتاح.
- الخاصية keyCode:
هذه الخاصية تقوم بإعطائك رمز كل مفتاح فمثلا السهل للأعلى رمزه 38 ورمز السهم لليسار هو 37 وأيضاً يمكن الوصول لنفس الرمز عن طريق الامر Keyboard.LEFT ورمز السهم لليمين هو 39 وأيضاً يمكن الوصول لنفس الرمز عن طريق الأمر Keyboard.RIGHT ورمز السهم للاسفل هو 40 كما يمكن الوصول لرمز المفتاح Space عن طريق الامر Keyboard.SPACE والمفتاح Backspaceعن طريق الامر Keyboard.BACKSPACE بالإضافة للمفتاح Enter عن طريقة الأمر Keyboard.ENTER.

الحدث ENTER_FRAME:
هذا الحدث هو احد الاحداث التي لا يتدخل المستخدم فيها فهي تحدث تلقائياً. الحدث ENTER_FRAME يتم توليده بناءاَ على سرعه ملف الفلاش فإذا كانت سرعه ملف الفلاش 12 fps فإذا هذا الحدث سوف يتم توليده 12 مره في الثانية, وهي تضاف للكائن stage object مباشرة. المثال التالي يوضح عمل هذا الحدث:
// import Sprite & Event Class
import flash.display.Sprite;
import flash.events.Event;


// create Circle object in the stage
var drawCir:Sprite = new Sprite();
drawCir.graphics.beginFill(0xCC9900, 1);
drawCir.graphics.drawCircle( 30, 30, 30);
drawCir.graphics.endFill();
addChild(drawCir);

// add event listener to the object
stage.addEventListener(Event.ENTER_FRAME, moveCir);

// functions be called execute when the event is received to move the Circle
function moveCir(evt:Event):void {
drawCir.x += 5;
drawCir.y += 5;
}
هذه الاوامر تقوم اولاً برسم دائرة باسم drawCir بعد ذلك قمنا بإضافة الحدث ENTER_FRAME لمنطقة العمل او الكائن stage object بحيث يتم توليد هذا الحدث 12 مره في الثانية الواحده ( على فرض ان سرعه ملف الفلاش 12 fps ) وبالتالي سوف يتم استدعاء الداله 12 مره في الثانية وهذه الداله تحتوي على اوامر لتحريك الدائرة.

الحدث TIMER:
هناك نوع آخر من الأحداث وهو TIMER يتم توليد هذا الحدث كل وقت معين يحدد مطور البرنامج بنفسه بعكس الحدث ENTER_FRAME الذي يتم توليده بناءاً على سرعه ملف الفلاش. لنبدأ بهذا المثال للتوضيح:
// import Sprite & TimerEvent Class
import flash.display.Sprite;
import flash.events.TimerEvent;


// create Circle object in the stage
var drawCir:Sprite = new Sprite();
drawCir.graphics.beginFill(0xCC9900, 1);
drawCir.graphics.drawCircle( 30, 30, 30);
drawCir.graphics.endFill();
addChild(drawCir);


// create Timer object and add event listener to the object
var moveTimer:Timer = new Timer(1000);
moveTimer.addEventListener(TimerEvent.TIMER, moveCir);

// functions be called execute when the event is received to move the Circle
function moveCir(evt:TimerEvent):void {
drawCir.x += 5;
drawCir.y += 5;
evt.updateAfterEvent(); // update the screen everytime the function call
}
moveTimer.start(); // start the Timer
قمنا اولا بانشاء كائن نوعه Timer باسم moveTimer وذلك عن طريق الأمر new بالإضافة لداله خاصة تعرف باسم Constructor ( وهي داله لها نفس اسم الصنف وتنفذ تلقائياً عندما يتم انشاء نسخة من الصنف instance of Class ) وهذه الداله يمرر لها معامل وهو delay اي الفترة الزمنية التي يتم فيها توليد هذا الحدث وتقاس بالـ millisecond. فقمنا بإضافة الوقت 1000 أي ان هذا الحدث سوف يتم توليده مره واحده في الثانية وبالتالي يقوم باستدعاء الداله مره واحد أيضاً كل ثانية لتقوم الدالة بتحريك الدائرة. السلوك updateAfterEvent() Method يقوم بتحديث الشاشة في كل مره يتم فيها استدعاء الدالة وذلك لكي تعرض الحركة بشكل اكثر انسيابية ومرونه. هذا الأمر يمكن استخدامه مع كل من الكائنات KeyboardEvent, TimerEvent & MouseEvent. حالياً ما قمنا به هو انشاء الحدث فقط لا غير وبالتالي عند اختبار العمل لن يحدث شيء إذ يجب أن نقوم بتفعيل هذا الحدث ونقوم بذلك باستخدام السلوك start() Method ليتم تفعيل الحدث وتبدأ الدائرة بالحركة.

الأمر removeEventListener:
الأمر addEventListener يقوم بإضافة الاحداث الى الكائن او بشكل ادق يستمع لكائن معين حتى يصدر من هذا الكائن حدث معين فيقوم بتنفيذ بعض الأوامر اما الامر removeEventListener فهو العكس فيقوم بحذف الامر الاول وعدم الاستماع لحدث معين مرتبط بهذا الكائن. لنأخذ مثال للتوضيح:
import flash.events.KeyboardEvent;
import flash.events.Event;


var drawCir:Sprite = new Sprite();
drawCir.graphics.beginFill(0x0000ff);
drawCir.graphics.drawCircle(30, 30, 30);
drawCir.graphics.endFill();
addChild(drawCir);

stage.addEventListener(KeyboardEvent.KEY_DOWN, KeyPress);
function KeyPress(evt:KeyboardEvent):void{
switch(evt.keyCode){
case Keyboard.RIGHT:
stage.addEventListener(Event.ENTER_FRAME, moveCir);
break;
case Keyboard.LEFT:
stage.removeEventListener(Event.ENTER_FRAME, moveCir);
break;
}
}

function moveCir(evt:Event):void{
drawCir.x += 5;
drawCir.y += 5;
}
هذه الاوامر تقوم اولاً بإنشاء دائرة ثم نقوم بالاستماع الاحداث الكيبورد بالتحديد عن الضغط على السهم لليمين والسهم لليسار فعند الضغط على السهم لليمين فسوف يتم إضافة الحدث ENTER_FRAME وبالتالي يتم تحريك الدائرة أما عند الضغط على السهم لليسار فسوف يتم حذف الحدث ENTER_FRAME وعليه تتوقف الدائرة عن الحركة.

فرح صالحي
30-05-2014, 03:33 PM
http://im53.gulfup.com/ZkUhRt.gifhttp://im53.gulfup.com/ZkUhRt.gif

الحارث بن فيصل
30-05-2014, 06:01 PM
خالص الشكر والامتنان على ما بذلتموه من جهود مباركة في إعداد هذا العمل


وفقكم الله وأثابكم ونفع بكم

أبو يوسف
31-05-2014, 02:58 PM
جزاكم الله خيرا أخانا خادم المسلمين

موفق بإذن الله ... لك مني أجمل تحية .

أبو صخر
31-05-2014, 08:28 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

abohmam
31-05-2014, 11:50 PM
جزاك الله خيرا أخى خادم المسلمين

بارك الله في جهودك

أبو فارس
06-06-2014, 11:01 AM
موفق بإذن الله ... لك مني أجمل تحية .

خادم المسلمين
25-09-2018, 01:10 PM
:abc_022::abc_022:

امجدمحمد
13-02-2019, 02:36 PM
شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .