التعامل مع الرسومات Graphics في فلاش

[azizsoft]

http://img39.imageshack.us/img39/1332/virusx.gif


مهم جدا أخي الكريم أن تفتح برنامج الفلاش لنتابع الشرح معا ولتستوعب ما سنعرضه حول طرق التعامل مع الرسومات عن طريق اكشن سكريبت 3
قبل ان نتابع لاحظ الصورة وضحت فيها احداثيات النقطة في مسرح العمل وتتطلب كل نقطة بداية احداثي x و احداثي y مثلا اضفنا اطار مستطيل بلون
أحمر في النقطة 100 اكس و300 واي لما انت تحب تغير مثلا مكان الاطار الى اليمين تغير الاحداثيين لتصبح 300 = اكس و300= واي .
http://www.mediafire.com/convkey/b96f/um3ne8f03xwmcpvzg.jpg
فهم هذه الجزئية هي التي تساعدك على استيعاب كامل الموضوع يعني انك تصبح قادر على اضافة اي شكل عن طريق الاكشن في اي مكان محدد
نمر الان الى الشرح وسنحاول كالعادة التبسيط الميسر والموجز .


الرسم في فلاش يكون دائما داخل كائن من نوع Shape أو MovieClip التابعين لكلاس ِGraphic Class


1/ رسم الخطوط المستقيمة

لنرسم في فلاش يجب أولا وقبل شىء انشاء كائن من كلاس Shape ليكون بمثابة الحاوي للرسوم التي سنضيفها داخله
(يمكن ان تنسخ الكود تلو الاخر بالترتيب وتتطبق على الفلاش لاستعياب الدرس )
اذن سنقوم بانشاء هذا الكائن من نوع shape
var my_shape:Shape = new Shape();
وسنضيفه الى مسرح العمل كما يلي
addChild(my_shape);
رسم أي خط في فلاش يتطلب 3 أوامر وهي :
lineStyle() وتتطلب 3 قيم 1سمك الخط 2ولونه 3ودرجة الشفافية
moveTo() تتطلب نقطة بداية x و y
lineTo() تتطلب نقطة نهاية x و y
اذن سنبدأ بتحديد خط بسمك 1 بكسل ولون احمر وشفافية كاملة 1
my_shape.graphics.lineStyle(1, 0xFF0000, 1);
الان سنبدأ الرسم وسنبدأ من النقطة 50 على المحور السيني x و50 على المحور الصادي y
my_shape.graphics.moveTo(50, 50);
نقطة البداية هذه طبعا لازملها نقطة نهاية لذلك حددنا النقطة 100 على المحور السيني x و50 على المحور الصادي y ونضيف الامر التالي
my_shape.graphics.lineTo(100, 50);

انتهينا من الكود الكامل والذي هو التالــــــــــــــــــــ ــــــي

var my_shape:Shape = new Shape();
addChild(my_shape);

my_shape.graphics.lineStyle(1, 0xFF0000, 1);
my_shape.graphics.moveTo(50, 50);
my_shape.graphics.lineTo(100, 50);


بتجربة العمل ستلاحظ الشكل التالي
http://www.mediafire.com/convkey/b7c5/jua29j568guv66uzg.jpg
لما تحب اضافة سطر اخر يمكن ان تضيف تحت هذا الكود الامرين التاليين وتقدر تكررهم كيف ما تحب فقط غير الاحداثيات
وتقدر ايضا تغير في حجم سمك الخط ولونه والسفافية
my_shape.graphics.moveTo(100, 100);
my_shape.graphics.lineTo(200, 100);


يمكن أن ترسم مربع ان شئت بتغيير الاحداثيات الكود التالي يوضح لك الأمر

var my_shape:Shape = new Shape();
addChild(my_shape);

my_shape.graphics.lineStyle(1, 0xFF0000, 1);
my_shape.graphics.moveTo(50, 50);
my_shape.graphics.lineTo(100, 50);
my_shape.graphics.lineTo(100, 100);
my_shape.graphics.lineTo(50, 100);
my_shape.graphics.lineTo(50, 50);



http://www.mediafire.com/convkey/7a5c/z62jtta64tb5f5rzg.jpg


2/ رسم المنحنيات :
تكون وجوبا عن طريق اضافة الدالة curveTo() وتاخذ 4 قيم ( x و y عبارة عن نقطة تحكم في المنحنى و x وy نقطة النهاية
لاحظ في هذا الكود رسمنا خط منحني يشيه شكل نصف دائرة وعكسناه من الاسفل فاصبح يشبه العين

var my_shape:Shape = new Shape();
addChild(my_shape);

my_shape.graphics.lineStyle(1, 0xFF0000, 1);
my_shape.graphics.moveTo(0, 50);
my_shape.graphics.curveTo(25, 0, 50, 50);
my_shape.graphics.curveTo(25, 100, 0, 50);


http://www.mediafire.com/convkey/7ccc/vd053wp5t3t5vhxzg.jpg
لو تجرب قليلا في القيمة مثلا 25 والقيمة 0 وهي نقطة التحكم تلاحظ ان الشكل تغير وهكذا تستطيع ترسم اي شكل في اي مكان
لو طبعا تمكنت من معرفة الاحداثيات وهي سهلة جدا :abc_050:

عندما ترسم مربع او دائرة بالخطوط التي ذكرناها سابقا وتريد اضافة ملىء لوني لها الدالة beginFill() هي المسؤولة عن ذلك وتسقبل معاملين بين القوسين الاول رمز اللون والثاني نسبة الشفافية ويجب ان يكون الكود مباشرة بعد السطر الاول الخاص بانشاء الخط يعني قبل رسم الشكل ويفضل دائما في اخر الكود اضافة الدالة المسؤولة عن انهاء الملىء اللوني وهي endFill() تفاديا لاي اخطاء الكود التالي يوضح الامر



var my_shape:Shape = new Shape();
addChild(my_shape);

my_shape.graphics.lineStyle(2, 0xFF0000, 1);
my_shape.graphics.beginFill(0x000000,1);
my_shape.graphics.moveTo(50, 50);
my_shape.graphics.lineTo(100, 50);
my_shape.graphics.lineTo(100, 100);
my_shape.graphics.lineTo(50, 100);
my_shape.graphics.lineTo(50, 50);
my_shape.graphics.endFill();


لاحظ أن كود الاطار my_shape.graphics.lineStyle يمكن تغيير لون قيمه اللون0xFF0000 وسمك الخط 2 والشفافية 1
وحذفه ان شئت ليبقى المربع بدون اطار .
حذف اي رسم يتم بواسطه الأمر my_shape.graphics.clear(); يعني يمكن ان تضع هذا الامر في فنكشيون خاصة بزر مثلا
لما تضغط يحذف الرسم .... تغير لون تغير اطار تكبر حجم ..... :abc_050:

3/ رسم المربعات والدوائر :

توفر اكشن سكريب دوال مميزة لرسم المربعات والدوائر وهاته الدوال هي
drawRect() رسم مربع او مستطيل
drawRoundRect() رسم مربع او مستطيل بزوايا منحنية
drawCircle() رسم دائرة

drawRect() تتطلب نقطة البداية x و y والطول والعرض drawRect(x, y, width, height);

لاحظ سنضيف الى المسرح مستطيل بلون اسود مع اطار بلون احمر يبدا من النقطة 50 - 50 وبطول 300 بكسل و 100 عرض

var my_shape:Shape = new Shape();
addChild(my_shape);

my_shape.graphics.lineStyle(1, 0xFF0000, 1);
my_shape.graphics.beginFill(0x000000,1);
my_shape.graphics.drawRect(50, 50, 300, 100);
my_shape.graphics.endFill();


drawRoundRect() تتطلب قيم نقطة البداية x و y والطول والعرض وقيمتي انحناء الزاوية (x, y, width, height, ellipse_width, ellipse_height)

القيمة الاخيرة ellipse_height اختيارية يعني يمكن الاستغناء عنها والكود الآخير يوضح الأمر


var my_shape:Shape = new Shape();
addChild(my_shape);

my_shape.graphics.lineStyle(1, 0xFF0000, 1);
my_shape.graphics.beginFill(0x000000,1);
my_shape.graphics.drawRoundRect(50, 50, 300, 100, 25);
my_shape.graphics.endFill();


يمكن أن تجرب تغير قيم السمك واللون ودرجة انحناء الزاوية الأخير وتلاحظ تغير شكل الزر او المستطيل.

لاحظ الان على سبيل المثال سنقوم بانشاء مربع بالاحداثيات والخصائص المذكورة يكون في الزاوية 0 0
احذف كل الاكواد السابقة واضف هذا الكود

var sprite1:Sprite = new Sprite();
sprite1.graphics.lineStyle (2,0x000000);
sprite1.graphics.beginFill (0xCCCCCC);
sprite1.graphics.drawRect (0,0,200,200);
addChild(sprite1);


سنضيف مربع ثاني بنفس اللون بجانبه يكون يكون بالاحداثي اكس 300 وواي 50 ويكون بزوايا منحنية بقيمة قدرها 30
انسخه والصقه تحت الكود السابق

var sprite2:Sprite = new Sprite();
sprite2.graphics.lineStyle(2,0x000000);
sprite2.graphics.beginFill(0xCCCCCC);
sprite2.graphics.drawRoundRect(0,0,200,200,30);
sprite2.x = 300;
sprite2.y = 50;
addChild(sprite2);



الان سنضيف كائن ثالث عبارة عن دائرة بلون اسود وعوض اضافتها للمسرح سنضيفها داخل الكائن sprite2
انسخ والصق تحت الكودين اعلاه


var sprite3:Sprite = new Sprite();
sprite3.graphics.lineStyle(2,0x000000);
sprite3.graphics.beginFill(0x333333);
sprite3.graphics.drawCircle (0,0,25);
sprite3.x = 100;
sprite3.y = 100;
sprite2.addChild(sprite3);



ولنضيف مثلا تفاعل المستخدم مع الماوس يكفي أن ان نضيف حدث استماع من نوع كليك


sprite1.addEventListener(MouseEvent.CLICK, clickSprite);
sprite2.addEventListener(MouseEvent.CLICK, clickSprite);

function clickSprite(event:MouseEvent) {
event.currentTarget.addChild(sprite3);
}



قمنا هنا باستعمال دالة event.currentTarget الجاهزة في البرنامج ليصبح كل كائن هو المستجيب للحدث عند النقر عليه
وجرب الضغط وسط اي مربع ستجد ان الدائرة تنتقل بين المربعين .

drawCircle() تتعلق برسم دائرة وتاخذ البارامتر التالي (x, y, radius)
بالنسبة للدائرة احداثي x واحداثي y هو مركز وسط الدائرة وradius هوقطر الدائرة يعني حجمها

الكود التالي يضيف لنا دائرة بالخصائص والاحداثيات المذكورة افسخ الاكواد السابقة واضف الكود التالي


var my_shape:Shape = new Shape();
addChild(my_shape);

my_shape.graphics.lineStyle(1, 0xFF0000, 1);
my_shape.graphics.beginFill(0x000000,1);
my_shape.graphics.drawCircle(150, 150, 25);
my_shape.graphics.endFill();


اضافة هاته الاشكال يتم التفاعل معها ايضا عن طريق لوحة المفاتيح ويمكن اضافة حركية عليها وتكرار واضافة الكتابة عليها وووو ... الكثير
ان شاء الله نقدم لها شرح .
الملف المفتوح في المرفقات فيه أكواد رسم بعض الاشكال عبر احداثيات محددة اطلع عليه لمزيد الفهم وفيه دالة الشكل
البيضاوي لم أتعرض لها .


أرجو أن أكون قد حققت الفائدة


http://up.graaam.com/img/c254fbbb25128f204e18c9c273464a02.png

[أبو يوسف]

جزاك الله خيرا أخانا شريف :abc_152: وبارك الله فيك

[abohmam]

جزاك الله خيرا أخى عزيز

ماشاء الله درس كامل الدسم وكثير الفائدة

بارك الله فيك ياطيب

[azizsoft]

بسم الله الرحمن الرحيم

أشكر لكم هذا الحضور الطيب اخوتي الكرام :abc_022:

[فرح صالحي]

السلام عليكم ورحمة الله وبركاته
جزاك الله خيرا كثيرا
موفق بإذن الله .:abc_026:.. لك مني أجمل تحية .

[خادم المسلمين]

كل الشكر والتقدير:abc_022::abc_152:

[عمر الخطيب]

شكؤل بك أخي الكريم :abc_114:

[الموسوعة للمعلوماتية]

نفع الله بكم

[عبد الهادي بهاب]

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

متابع معكم الدروة و الشرح

[عبد الهادي بهاب]

هل فيه تسميات للاشكال الاخرى كالنجمة و و و ........... فيكفي ان اغير مثلا مستطيل rectangle بكلمة etoile مثلا .........هل هذا ممكن ؟؟؟

[azizsoft]

اكشن سكربت تمكنك من رسم اي شكل تريده لاحظ هذا المثال واضغط على الشكل عدة مرات
http://www.emanueleferonato.com/2013/06/22/as3-code-snippet-draw-a-star-and-determine-its-area/

[عبد الهادي بهاب]

اكشن سكربت تمكنك من رسم اي شكل تريده لاحظ هذا المثال واضغط على الشكل عدة مرات
http://www.emanueleferonato.com/2013/06/22/as3-code-snippet-draw-a-star-and-determine-its-area/

روعة ..... الكود كما فهمهته يتعلق بالزوايا و الحجم .....يعني ام اي شكل يكفي ان نغير عدد الزوايا و قيسها حتى نحصل على الشكل المطلوب

شكرا على التوجيه

[عبدالله اوحموش]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[امجدمحمد]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[امرغاد]

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