تويت
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
سنحاول في هذ الدرس ان شاء الله التعرف على كيفية الرسم في برنامج الفلاش عن طريق الماوس بطريقة مبسطة وسينم اثراء الموضوع لاحقا
ان شاء الله في شرح نظم الألوان وتطبيقها .
اذن افتح أخي برنامج الفلاش وتابع معي التطبيق
بداية لابد أن نفهم انه لايمكننا تطبيق أي رسم الا اذا قمنا بانشاء DisplayObject لنرسم داخله ما نريد لذلك نتوجه مباشرة الى كلاس
flash.display.Shape
الخطوة الأولى :
نقوم بانشاء عنصر shape لنرسم داخله وسيكون الكود التالي :
[HTML]
// انشاء عنصر من نوع شايب
var monDessin:Shape = new Shape();
// اضافة هذا العنصر في قائمة العرض
addChild ( monDessin );
[/HTML]
الخطوة الثانية :
الان سنضيف الكود الخاص بتمكين الماوس من الرسم داخل العنصر المذكور وسيكون الكود كالتالي :
[HTML]
// حدث الاستماع في حالة الضغط المتواصل على الماوس
stage.addEventListener ( MouseEvent.MOUSE_DOWN, clicSouris );
function clicSouris ( pEvt:MouseEvent ):void
{
// تخزين احداثيات الماوس عند الضغط في اي مكان
var positionX:Number = pEvt.stageX;
var positionY:Number = pEvt.stageY;
}
[/HTML]
الخطوة الثالثة:
الان يجب علينا أن نضيف أوامر الرسم وبالتالي وجب اضافة بعض خصائص الكلاس graphics
وباضافة سطر اخر للكود أعلاه يصبح كالتالي :
[HTML]
// انشاء عنصر من نوع شايب
var monDessin:Shape = new Shape();
// اضافة العنصر الى قائمة العرض
addChild ( monDessin );
// حدث الاستماع في حالة الضغط المتواصل على الماوس
stage.addEventListener ( MouseEvent.MOUSE_DOWN, clicSouris );
function clicSouris ( pEvt:MouseEvent ):void
{
// تخزين احداثيات الماوس عند الضغط في اي مكان
var positionX:Number = pEvt.stageX;
var positionY:Number = pEvt.stageY;
// بداية الرسم انطلاقا من هاته النقطة التي ضغط عليها المستخدم
monDessin.graphics.moveTo ( positionX, positionY );
}
[/HTML]
لاحظ اخي الكريم أنه عند معاينة المشروع Ctrl +Enter لن يحدث أي شىء ولن تستطيع الرسم لاننا ببساطة لن نضيف أمر الرسم
عبر تحريك الماوس لذلك سنستغل الدالة lineTo
الخطوة الرابعة:
الان يجب الاستماع الى حدث MouseEvent.MOUSE_MOVE وبالتالي نضيف هذا الأمر ليصبح الكود كما يلي
[HTML]
// انشاء عنصر من نوع شايب
var monDessin:Shape = new Shape();
// اضافة العنصر الى قائمة العرض
addChild ( monDessin );
// حدث الاستماع في حالة الضغط المتواصل على الماوس
stage.addEventListener ( MouseEvent.MOUSE_DOWN, clicSouris );
function clicSouris ( pEvt:MouseEvent ):void
{
// تخزين احداثيات الماوس عند الضغط في اي مكان
var positionX:Number = pEvt.stageX;
var positionY:Number = pEvt.stageY;
// بداية الرسم انطلاقا من هاته النقطة التي ضغط عليها المستخدم
monDessin.graphics.moveTo ( positionX, positionY );
// عند بداية ضغط المستخدم سنستمع الى هذا الحدث الخاص بتحريك الماوس
pEvt.currentTarget.addEventListener ( MouseEvent.MOUSE_MOVE, bougeSouris );
}
[/HTML]
وأسفله هذا نضيف الأوامر التي يجب تنفيذها عند تحريك الماوس وتكون كما يلي :
[HTML]
function bougeSouris ( pEvt:MouseEvent ):void
{
var positionX:Number = pEvt.stageX;
var positionY:Number = pEvt.stageY;
// نهاية الرسم في النقطة الثانية لاحداثيات الماوس
monDessin.graphics.lineTo ( positionX, positionY );
}
[/HTML]
الخطوة الخامسة :
حدننا الأن أوامر بداية الرسم ونهايته عبر حدثي ضغط الماوس وتحريكها وما علينا الا أن نحدد بعد ذلك نوع الخط ولونه
لذلك سنستغل الدالة lineStyle من كلاس Graphics وهذا هو الأمر
[HTML]
// 4 = سمك الخط - 0x990000 = لونه - 1 = الشفافية
monDessin.graphics.lineStyle ( 4 , 0x990000, 1 );
[/HTML]
الخطوة السادسة:
يجب علينا الان أن نحذف حدث الاستماع MouseEvent.MOUSE_MOVE يعني عند مواصلة ضغط المستخدم
للرسم ورفع اصبعه سيجد مشكلة وبالتالي يجب علينا اضافة حدث MouseEvent.MOUSE_UP وسيكون الأمر كالاتي :
[HTML]
stage.addEventListener ( MouseEvent.MOUSE_UP, relacheSouris );
function relacheSouris ( pEvt:MouseEvent ):void
{
// حذف حدث الاستماع MouseEvent.MOUSE_MOVE
pEvt.currentTarget.removeEventListener ( MouseEvent.MOUSE_MOVE, bougeSouris);
}
[/HTML]
الكود النهائي لما سبق ذركره سيكون كما يلي :
[HTML]
// انشاء عنصر من نوع شايب
var monDessin:Shape = new Shape();
// اضافة العنصر الى قائمة العرض
addChild ( monDessin );
// حدث الاستماع في حالة الضغط المتواصل على الماوس
stage.addEventListener ( MouseEvent.MOUSE_DOWN, clicSouris );
function clicSouris ( pEvt:MouseEvent ):void
{
// تخزين احداثيات الماوس عند الضغط في اي مكان
var positionX:Number = pEvt.stageX;
var positionY:Number = pEvt.stageY;
// بداية الرسم انطلاقا من هاته النقطة التي ضغط عليها المستخدم
monDessin.graphics.moveTo ( positionX, positionY );
// عند بداية ضغط المستخدم سنستمع الى هذا الحدث الخاص بتحريك الماوس
pEvt.currentTarget.addEventListener ( MouseEvent.MOUSE_MOVE, bougeSouris );
}
function bougeSouris ( pEvt:MouseEvent ):void
{
var positionX:Number = pEvt.stageX;
var positionY:Number = pEvt.stageY;
// نهاية الرسم في النقطة الثانية لاحداثيات الماوس
monDessin.graphics.lineTo ( positionX, positionY );
// 4 = سمك الخط - 0x990000 = لونه - 1 = الشفافية
monDessin.graphics.lineStyle ( 4 , 0x990000, 1 );
}
stage.addEventListener ( MouseEvent.MOUSE_UP, relacheSouris );
function relacheSouris ( pEvt:MouseEvent ):void
{
// حذف حدث الاستماع MouseEvent.MOUSE_MOVE
pEvt.currentTarget.removeEventListener ( MouseEvent.MOUSE_MOVE, bougeSouris);
}
[/HTML]
تطبيق على الشرح اضغط وارسم بالماوس
http://im50.gulfup.com/PLekrx.swf
الملف المفتوح في المرفقات
لاتنسونا من صالح الدعـــــــــــــــاء
بالتوفيق للجميع
وبارك الله فيك 
تعليق